How to adjust footer column widths in Blockshop Theme?

tgon
New Member
2 0 1

I'm trying to adjust the column widths on this theme. It only had 3 blocks. So I edited the code to allow for 5 blocks, but now the Contact column is funky and in mobile version, it's the only one now centered on the page. 

The site is not live yet, but here is a preview: https://ve3vzdbzc6tygmd0-9174492.shopifypreview.com/

Natztech
Explorer
153 33 28

Please place this code at the end of theme.scss

Please make 'm' of media small. Here is some issue that M is getting capitalized automatically

 

 

@_media  only screen and (max-width: 600px) {
.footer--root .footer--blocks .footer--block .footer--block--container {
margin: 0 auto;
}
}

 

 

 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
dmwwebartisan
Shopify Partner
4570 1028 1321

@tgon 

Please use this code for the mobile.

@media only screen and (max-width: 767px){
.footer--block--container{ text-align: center; }
}

 

Hope this helps.

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
0 Likes
tgon
New Member
2 0 1

Hi Natztech, I added this in, but it didn't do anything to the column widths. They still look the same. There are two theme css. I put it in async.css.liquid. 

 

 Screen Shot 2021-01-30 at 8.22.43 PM.png

Screen Shot 2021-01-30 at 8.18.45 PM.png

0 Likes
dmwwebartisan
Shopify Partner
4570 1028 1321

@tgon 

You can try to use this code.

/* for mobile center text */
@media only screen and (max-width: 767px){
.footer--block--container{ text-align: center; }
}

/* for desktop padding */
@media only screen and (min-width: 768px){
.footer--block{ padding: 46px; }
}

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
0 Likes