Jump to content

Portfolio Grid Alignment – 7.1

Recommended Posts

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!

1700312885_ScreenShot2021-03-14at1_39_20PM.thumb.png.cc3e1dd45ee8024f4e31e1b4c9f73599.png.419bc35793896d811d4b348ca3940923.png

Edited by jaugustyn
Link to comment
  • Replies 6
  • Views 716
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Screenshot 2023-03-12 at 16.13.31.png

Screenshot 2023-03-12 at 16.13.43.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.