How can I set a maximum page width for my theme?

[NomadicSpirit]

Hi,

Page: https://nomadic-spirit-design.myshopify.com/

Pw: testpagelock

Is it possible to add a maximum page with to the whole theme?

Example of what I want:

This forum has a max width to the page area, inside which the entire page is contained (see screenshot below).

How can I replicate this in my theme?

• Maximum page with 1500px
• Set background color: F4F6F8
• With drop shadow effect

Thanks,

Mike

[KetanKumar]

@NomadicSpirit

Yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
   this code apply for after 5 - 6 second

body {
max-width: 1500px;
    margin: 0px auto;
    background: #F4F6F8;
    box-shadow: 0 1.2rem 3.6rem rgb(0 0 0 / 20%);
}

[NomadicSpirit]

@KetanKumar Thank you so much! The solution is nearly perfect.

There are some elements that extend beyond the body, namely:

• The Header, after scrolling down and becoming sticky.
• Some picture sections, extend to the right

[NomadicSpirit]

Issue fixed for some images extending past the body.

Find the below section of code in theme.css and add

max-width:1500px;

.background-media-text{
  position:absolute;
  width:100%;
  overflow:hidden;
  background:{{ settings.color_large_image_bg | default: "#1c1d1d" }};
  background:var(--colorLargeImageBg);
  background-size:cover;

@KetanKumar the only issue that remains is the Header. After you scroll down and the header becomes sticky to the top of the window, it changes and extends past the body. I can’t seem to figure out how to fix that last bit - any ideas?

Thanks,

Mike

[KetanKumar]

@NomadicSpirit

thanks for update

yes please share new issue image so i will guide you

[NomadicSpirit]

@KetanKumar The top menu bar is positioned correctly when you load the page. However, when you scroll down, the menu bar extends past the body. See here as requested:

[KetanKumar]

@NomadicSpirit

do you need fix width on scroll right?

[NomadicSpirit]

@KetanKumar Yes, thats correct

[KetanKumar]

@NomadicSpirit

thanks for confirm yes please add this code

.site-header.site-header--stuck.site-header--opening {
    width: calc(100% - 21%);
    margin: 0px auto;
}

After code view

[NomadicSpirit]

@KetanKumar Thank you for the quick reply and suggestion.

However, now it is too small:

[KetanKumar]

@NomadicSpirit

you have change value as you like

[NomadicSpirit]

@KetanKumar Thank you for your help, it is all working now.

I changed your code to this, and it works better:

.site-header.site-header--stuck.site-header--opening {
    /*width: calc(100% - 21%);*/
    max-width:1500px;
    margin: 0px auto;
}

[NomadicSpirit]

@KetanKumar In fact, this code works better. Thank you for your help!

.site-header.site-header--stuck.site-header--opening {
    /*width: calc(100% - 21%);*/
    max-width:1500px;
    margin: 0px auto;
}

[KetanKumar]

@NomadicSpirit

great thanks for update

[NomadicSpirit]

@KetanKumar Thank you for the help, I really appreciate you taking the time

[KetanKumar]

@NomadicSpirit

it’s my pleasure to help us

[era2]

Hi @KetanKumar ! I have the same problem, however adding this to the code doesn’t seem to change anything. Any recommendations? emmabrookejewelry.com, PW nahlia.
Thank you!

[KetanKumar]

@era2

yes please try this

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

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

[era2]

@KetanKumar thank you! I’m afraid still nothing is changing! I’ve tried adding this alone, and together with the earlier segment you suggested, and everything is still full width. I am adding to theme.css.liquid. I even tried replacing the section of code earlier in that asset that contains this (below), and still no changes. I know I’m in the right theme’s code! Any ideas?

body,html{
padding:0;
margin:0;
}

[KetanKumar]

@era2

oh i see can you please provide screenshot for this issue?