Page template full width on mobile - Turbo theme

Solved
louislsh
Tourist
6 0 0

Hi,

I am using the Turbo theme and I want wider page width on mobile.

unnamed1.png

I've created a page template named membership and i want it to have 0 margin on all sides but unfortunately I cannot figure out how to achieve this.

Untitled144.png

The page in question is https://pierrecardinlingerie.com/pages/ji01

I think i can edit styles.scss file but not sure how to do it, need kind assistance to help.

Thank you for your help!

0 Likes
dmwwebartisan
Shopify Partner
5851 1338 1715

This is an accepted solution.

@louislsh 

Please add the following code at the bottom of your assets/styles.scss.liquid  OR assets/styles.scss.css  file.

@media only screen and (max-width: 798px){
.page-membership .container { width: 100% !important; padding: 20px 2px !important;}
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
louislsh
Tourist
6 0 0

Hi thanks, it works. 
However, the footer aligned to the left. Is there a way to fix this?
Thank you

Untitled-1.jpg

0 Likes
dmwwebartisan
Shopify Partner
5851 1338 1715

@louislsh 

Please add following CSS .

@media only screen and (max-width: 798px){
.container .one-third.column { width: 100% !important;}
}
If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
louislsh
Tourist
6 0 0

Thanks for been so helpful!

One last thing and i hope you don't kill me with my many requests. 

I was hoping the footer can be aligned all the way.

Hope there could be padding on the bottom newsletter sign up and align footer to centered.

Apologies, if it's too much work then probably i'll just leave it as it is. 

unnamed1.png

0 Likes
Natztech
Shopify Partner
649 179 434

This is an accepted solution.

@louislsh  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot http://prnt.sc/126gpm4

 

@media only screen and (max-width: 798px){
 .footer .container {
    width: 400px !important;
}

.footer .footer-menu-wrap .sixteen{
	width: 100% !important;
        margin: 0 auto !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
louislsh
Tourist
6 0 0

It works! Thanks for all the helps.

0 Likes