Adjust Page width & margin Dawn Theme

[Fukuro]

Hi everyone, 

I am a beginner in using shopify and building websites and currently struggle getting the widht right. 

I tried putting the code in the end of the base.css section first, however it ended up working well only for some pages while other still were messed up. Also when doing this, the margin in mobile-view were to big.

.page-width {
    max-width: 100% !important;
}

It seems like something is off somewhere and I might have messed it up myself tbh.

I would greatly appreciate your help with this.

Website adress is https://fukuroandfriends.com/ 

PW: HLD2K31

[BSSCommerce-HDL]

Hi @Fukuro 

Its seem to be fixed right?

Do you have any problem else?

[Fukuro]

No I have undone the css code, because it messed everything up. So now it is basically as it was before. But if you check the other pages, you will see that there the margins are too big on mobile view. 

So basically the challenge is this:

1. I want every page to have the same width

2. On mobile view, all pages should be like this: 

[BSSCommerce-HDL · Accepted solution]

You can try following these steps to fix on mobile view:
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
    @media screen and (max-width: 750px) {
     .page-width {
        padding: 0 0!important;
    }
    .image-with-text__content.image-with-text__content--top.image-with-text__content--desktop-left.image-with-text__content--mobile-left.image-with-text__content--adapt.content-container.background-transparent {
        padding: 10px 10px !important;
border: 0!important;
    }
    .image-with-text__text-item.grid__item {
        padding: 0 0!important;
border: 0!important;
    }
    .image-with-text__content.image-with-text__content--top.image-with-text__content--desktop-left.image-with-text__content--mobile-left.image-with-text__content--small.content-container.background-transparent{
        padding: 10px 10px!important;
border: 0!important;
    }
    .image-with-text__content.image-with-text__content--middle.image-with-text__content--desktop-left.image-with-text__content--mobile-left.image-with-text__content--adapt.content-container.background-transparent {
        padding: 10px 10px!important;
border: 0!important;
    }

    .image-with-text__text-item {
            padding: 10px 10px!important;
    }
.banner__box.content-container {
    padding: 0 0!important;
}
.image-with-text__media {
border: 0!important;
}
    }
</style>

Here is result:

If the space still too big, you can decrease "10px" from code above to smaller.

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Fukuro]

Hi!

That worked out well, thank you so much! I also added the code in the base.css

.page-width {
    max-width: 100% !important;
}

However, I still have the issue that the pages are all misaligned:

Ideally all pages should be like the about us page and contet should start after the red line:

However this is how it looks on the other pages:

contact page

Start page:

And also the other page (Kollektion) and its sub-pages.

What do I need to fix, to have it all aligned perfectly? Thanks in advance!

[BSSCommerce-HDL]

You can try add this code before tag "</style>" as previous:

@media screen and (min-width: 780px) {
 .content-for-layout.focus-none {
    padding: 0 122px 0 122px!important
}

Tell me if that work or you need anything else

[Fukuro]

Thanks, I think the confusion came with the box itself having a different configuration. I will check again and see if I can get it fixed with playing around with custom css in the editor. Thanks!

[BSSCommerce-HDL]

You're welcome. Have a good day!