Featured Collection Home Page - Padding Issue

[ellacoker]

Hello,

Is someone please able to assist me in fixing my padding of my featured collection on home page? It seems to be off centre for some reason, I want the images to line up with my "Browse the Earth Collection" With the same padding on the left side.

For mobile, there is this same issue, but I would like the photos to come out a bit wider, again in line with the "browse the earth collection" text.

Thank you,

Ella.

URL:https://www.livwithin.com.au/?_ab=0&_fd=0&_sc=1

PW: pewpog

[Dotsquares]

Hi @ellacoker To fix the padding and alignment issue for your Featured Collection on the homepage

To fix the padding and alignment issue for your Featured Collection on the homepage:-

1) Adjust Desktop Padding

Go to Shopify Admin → Online Store → Themes → Edit Code

Open theme.css, base.css, or custom.css (whichever your theme uses)

Add this CSS at the bottom of the file:

/* Align Featured Collection with "Browse the Earth Collection" text */
.featured-collection {
padding-left: 5%; /* Adjust the left padding */
padding-right: 5%; /* Ensure equal padding */
max-width: 1200px; /* Restrict width for better alignment */
margin: 0 auto; /* Center align */
}

2) Adjust Mobile View

Add this code

@media screen and (max-width: 768px) {
.featured-collection {
padding-left: 3%; /* Reduce left padding */
padding-right: 3%;
}

.featured-collection img {
width: 100% !important; /* Make images take up more space */
max-width: 400px; /* Set a max width to avoid stretching */
margin: 0 auto; /* Center images */
}
}

Let me know if this works.