Portfolio Grid Alignment – 7.1

Hi There,

I am having trouble getting the portfolio grid on my landing page to align with the max site width I have set (1400px wide). If I set the portfolio grid to "inset", the image thumbnails are inset further in than the rest of the text on the page. If I set it to "full", the thumbnails align with the text then ... however, once I expand the screen width a bit, these thumbnails keep expanding and won't stop. I would like the portfolio thumbnails to be aligned with the text / images on my pages and only expand to the max site width (which I have set to be 1400px) and stop there. 

Any help or ideas on how to align these elements would be really appreciated. Thanks!

Hi. Add to Design > Custom CSS > Then save & reload your site

/* Grid width */
[data-section-id="5f67949663133850a624efb4"] .content-wrapper {
    max-width: 1400px !important;
}

Hi There,

Awesome. Thank you so much for your help with this. I really appreciate it!

Hello. I would also like to achieve this for my site. The site is 1200px wide. I tried the above code (with all the data-section-id's I could on the page) but without any luck. Can you help @tuanphan or anybody else?

https://www.jonathansage.de/work 
password: sage

Much appreciated!

On 3/8/2023 at 10:28 PM, jonny1182 said:

Hello. I would also like to achieve this for my site. The site is 1200px wide. I tried the above code (with all the data-section-id's I could on the page) but without any luck. Can you help @tuanphan or anybody else?

https://www.jonathansage.de/work 
password: sage

Much appreciated!

With your site, just use this CSS code

div#gridThumbs {
    padding-left: 5px;
    padding-right: 5px;
}

On 3/11/2023 at 10:28 AM, tuanphan said:

With your site, just use this CSS code

div#gridThumbs {
    padding-left: 5px;
    padding-right: 5px;
}

 

Thanks @tuanphan for your response. This didn't seem to work. To sum up, I want the portfolio grid to be 1400px (to align with the site). 

div#gridThumbs {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 1400px
}

I added 1400px max-width to the Custom CSS code and it worked well, however, when I scale the screen down below 1400px the site margins no longer constrain the content (i.e. they go to the edge of the screen and not the 12vw spacing I have for the remainder of the site). 

jonathansage.de
password: sage

Thank you in advance! 
Jonathan

@tuanphan - The issue mentioned above also applies to mobile view, where there is no longer a margin.

I hope you can help. Thanks in advance.