How to adjust footer column widths in Blockshop Theme?

[tgon]

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]

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

[dmwwebartisan]

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

[tgon]

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. 

 

[dmwwebartisan]

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