Shopify themes, liquid, logos, and UX
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?
Thanks,
Mike
Solved! Go to the solution
This is an accepted solution.
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%);
}
This is an accepted solution.
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
This is an accepted solution.
@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;
}
This is an accepted solution.
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%);
}
@KetanKumar Thank you so much! The solution is nearly perfect.
There are some elements that extend beyond the body, namely:
This is an accepted solution.
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
thanks for update
yes please share new issue image so i will guide you
@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:
do you need fix width on scroll right?
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
you have change value as you like
This is an accepted solution.
@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;
}
@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;
}
great thanks for update
it's my pleasure to help us
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!
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%;}
@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;
}
oh i see can you please provide screenshot for this issue?
this works, but my issue is the header and footer we need them full width.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024