Solved

Impulse: disable full page width

NomadicSpirit
Tourist
10 2 7

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

Screen Shot 2021-06-20 at 15.41.58.png

 

Thanks,

 

Mike

Accepted Solutions (3)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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%);
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

NomadicSpirit
Tourist
10 2 7

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

View solution in original post

NomadicSpirit
Tourist
10 2 7

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;
}

 

 

View solution in original post

Replies 20 (20)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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%);
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NomadicSpirit
Tourist
10 2 7

@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_0-1624266754847.png

 

NomadicSpirit
Tourist
10 2 7

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

KetanKumar
Shopify Partner
36839 3635 11972

@NomadicSpirit 

thanks for update 

yes please share new issue image so i will guide you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NomadicSpirit
Tourist
10 2 7

@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:

Screen Shot 2021-06-23 at 10.41.19.png

KetanKumar
Shopify Partner
36839 3635 11972

@NomadicSpirit 

do you need fix width on scroll right?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NomadicSpirit
Tourist
10 2 7

@KetanKumar  Yes, thats correct

KetanKumar
Shopify Partner
36839 3635 11972

@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

KetanKumar_0-1624444599045.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NomadicSpirit
Tourist
10 2 7

@KetanKumar Thank you for the quick reply and suggestion.

However, now it is too small:

Screen Shot 2021-06-23 at 11.40.25.png

KetanKumar
Shopify Partner
36839 3635 11972

@NomadicSpirit 

you have change value as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NomadicSpirit
Tourist
10 2 7

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;
}

 

 

NomadicSpirit
Tourist
10 2 7

@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
Shopify Partner
36839 3635 11972

@NomadicSpirit 

great thanks for update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NomadicSpirit
Tourist
10 2 7

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

KetanKumar
Shopify Partner
36839 3635 11972

@NomadicSpirit 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
era2
Tourist
10 0 4

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
Shopify Partner
36839 3635 11972

@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%;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
era2
Tourist
10 0 4

@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
Shopify Partner
36839 3635 11972

@era2 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ibra_skies
Visitor
1 0 0

this works, but my issue is the header and footer we need them full width.