Impulse: disable full page width

Solved
NomadicSpirit
Tourist
9 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)

Accepted Solutions
KetanKumar
Shopify Partner
24919 2495 9027

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
9 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
9 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 19 (19)
KetanKumar
Shopify Partner
24919 2495 9027

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
9 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
9 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

KetanKumar
Shopify Partner
24919 2495 9027

@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
9 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
24919 2495 9027

@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
9 2 7

@KetanKumar  Yes, thats correct

KetanKumar
Shopify Partner
24919 2495 9027

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