Adjust product Page dawn theme side margin

[DasPod]

Hi I am new to Shopify and a dummy to coding. Can anyone please help?

I am building this website softsavg.com

I want my entire website to be full width. Burt I have been able to make some sections full width. But the headers are still not aligned. Like this: I have marked the margin on the left of the header ‘Latest Drop’

There are more such headlines if you scroll below. I want all these headlines to align to the left with the rest of the sections.

Also on the product page the images are not aligned to the extreme left. I want them to be aligned to both on the left and right.

I want to remove the margin on the left and right. The image needs to be bigger to fit the viewport, without any padding. And the images below are appearing in 2 columns. Can they appear like the first image, one at a time?

[B2Bridge]

Hi @DasPod
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[B2Bridge]

You want its look like this, right ?

[DasPod]

Yes, I want them to be aligned like this. Can you please guide me on how to do it?

[Made4uo-Ribe]

Hi @DasPod

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection__title.title-wrapper {
    max-width: 100% !important;
}

product-info .page-width {
    max-width: 100%;
}

.product__info-container {
        max-width: max-content !important;
    }

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[DasPod]

@Made4uo-Ribe thanks a lot. But in this the first image is still not left aligned with the logo and the other images still appear in 2 columns. Can the images be:

1. completely left aligned; without any top & bottom padding

2. Stacked on top of each other one by one instead of in columns of 2

Can the right side have 2 coloumns:

1. for the navigation, title, product price, descriptions, collapsible columns & icons with text

2. Another for the variants and the ATC & buy now buttons

Can the related products sections below be full width as well?

Thanks in advance for the help!

[Made4uo-Ribe]

2. Stacked on top of each other one by one instead of in columns of 2 - for this one I would not suggest to make i 1 column it would not be usder friendly since the customer will be scroll a lot of pictures.

Add this code for other req.

@media only screen and (min-width: 749px){
.product-media-container.constrain-height {
    width: 100% !important;
}

product-info .page-width {
    padding: 0 !important;
}

product-recommendations.related-products.page-width {
    max-width: 100%;
    padding: 0;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[DasPod]

Hi @Made4uo-Ribe ,

Thanks a ton! That partly solves my problems. And I understand your suggestion about stacking the images in 1 columns. So would avoid that.

I have marked the problems which are solved with a (Done) below.

Product page:

1. Can the images be completely left aligned; without any top & bottom padding - Done

2. Can the right side (The product details, variants, ATC & buy buttons) have 2 coloumns:

a. 1 for the navigation, title, product price, descriptions, collapsible columns & icons with text

b. another for the variants and the ATC & buy now buttons
3. Can the related products sections below be full width as well? - Done