Portfolio page summary - image alignment

Site URL: https://weedwise.squarespace.com

Hi,

I have added a portfolio (projects) section to this website and want to use CSS to tidy up the design of the project summary page. In particular, I would like to get rid of the padding around the images, so that they line up with the text above, ie. they fit the full width of the site, which is 1280px.

How do I do this please?

https://weedwise.squarespace.com (pw: W33dw1s3)

Thank you!

Lynne

On 12/1/2021 at 9:53 PM, spotonlynne said:

Site URL: https://weedwise.squarespace.com

Hi,

I have added a portfolio (projects) section to this website and want to use CSS to tidy up the design of the project summary page. In particular, I would like to get rid of the padding around the images, so that they line up with the text above, ie. they fit the full width of the site, which is 1280px.

How do I do this please?

https://weedwise.squarespace.com (pw: W33dw1s3)

Thank you!

Lynne

Do you mean reducing this spacing?

@bangank36 Hi!

No, I want the group of images to line up with the text section above and the text in the image section below. So the page looks the same width all the way down (apart from the main menu bar). At the moment, the section with the project list is narrower. I realise it moves around from screen to screen, but I was hoping there was some way of making it look neater.

Thank you!

Lynne

@bangank36

I have attached an image showing what the graphic designer wants me to achieve on this page. Hopefully you will know what I need to do. I don't know enough about CSS to resolve this.

Thank you!

Lynne

Try this CSS

header#header, article section:first-child {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

On 12/25/2021 at 8:19 AM, tuanphan said:

Try this CSS

header#header, article section:first-child {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

 

Hi @tuanphan,

That didn't actually work for me. However, I have resolved it with this code (so pleased with myself for finally working it out!):

/* Removing spacing on portfolio grid images */

@media only screen and (min-width: 1280px) {

section[data-section-id="60edcca24c056a31b8193704"] {

.portfolio-grid-basic

{padding-right: 0px; padding-left: 0px; padding-bottom: 100px !important;

  }}}