How to modify the left margin on the About Us Page?

Store Design
1

Hey!

We’re trying our best to modify our About us page by increasing the left margin to which the image can appear.

When I inspect and change the max-width code to say 120%, the image only increases in size into the right margin - the left margin remain in tact, with the image not entering further into the left margin whatsoever.

Can someone advise on how we can increase both margins equally?

Page = https://epicoffee.myshopify.com/pages/about-us-1

Password = autseb

Thank you so much!

2

Hi,

Please add the following code to Assets/base.css.

@media only screen and (min-width: 750px) {
.page-width--narrow {
    max-width: 100% !important;
    width: 100%;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }
}

If you want the title (About Us) to be left align, please delete align-items: center; (or change align-item: center to left).

Hope it helps.

Thanks.

3

Hi @EpicHodler ,

You want it to look like this:

Screenshot.png
Screenshot.png1565×822 264 KB

Because it only needs to change for ‘About Us’ page so you need to add condition to it. Go to main-page.liquid file and change code here:

before
before1161×553 36.2 KB

after
after1252×494 36.1 KB

Code:

{% unless page.handle contains 'about-us' %}page-width--narrow{% endunless%}

Hope it helps!

4

Thank you so much! This has worked and we’ve now changed this to your suggestion! :slightly_smiling_face:

5

Thank you for your help! :slightly_smiling_face: