Share Your Work

CVidaillac
Member

Change the size of the image gallery on desktop view

SOLVE

Hi all, 

 

I'm currently trying to make the size of the images in the image gallery smaller on a desktop view. It looks fine on mobile because the images automatically adjusts, but on desktop it's huge. Is there a way to modify it to look normal?

 

Desktop view:desktop view.png

 

Mobile view:

mobile view.png

 

Thank you in advance.

0 Upvotes
1 Accepted solution
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Change the size of the image gallery on desktop view

SOLVE

Hi @CVidaillac ,

 

Try adding the CSS I shared at the bottom of the file without the style tags (<style></style>)



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


View solution in original post

7 Replies 7
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Change the size of the image gallery on desktop view

SOLVE

Hi @CVidaillac ,

 

Try this:

<style>
.hs_cos_gallery {
  max-width: 800px;
  margin: 0 auto;
}
</style>

Change the '800px' to something that works for you.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


CVidaillac
Member

Change the size of the image gallery on desktop view

SOLVE

Hi @Teun

 

Thank you for the code! I'm not familiar with the HTML/CSS, so thank you for your patience. 

I went the DesignTool under that template and I cannot find a way to change the CSS for the Image Gallery Module. Would you be able to help me out?

Screen Shot 2021-10-05 at 1.28.16 PM.png

 

Thank you

0 Upvotes
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Change the size of the image gallery on desktop view

SOLVE

Hi @CVidaillac ,

 

Try adding the CSS I shared at the bottom of the file without the style tags (<style></style>)



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Change the size of the image gallery on desktop view

SOLVE

Hi @CVidaillac ,

 

Can you share a URL of a preview page so we can do some testing?

Might be able to deliver the CSS you need to fix this.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


0 Upvotes
CVidaillac
Member

Change the size of the image gallery on desktop view

SOLVE
0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Change the size of the image gallery on desktop view

SOLVE

Hi @CVidaillac ,

 

Can you demonstrate how to insert these images on your page? It would be good to see how it is programmed for this.

 

Either way, you can easily adjust the size by editing your code's CSS, but it requires a basic knowledge of html/css.

 

Best regards!

 

 

0 Upvotes
CVidaillac
Member

Change the size of the image gallery on desktop view

SOLVE

Hi @DanielSanchez , 

I used the "Image Gallery" module. 

Is there a specific resource you know to change the CSS to make it desktop friendly?

 

Thank you!

0 Upvotes