Text not stacking on mobile

[veroak]

Hi!
I added a kind of pre-footer with 3 blurbs. It’s all great on desktop, but they’re not stacking on mobile. It can be seen on any page -> the 3 blurbs that have the ‘returns & exchange’ etc links (https://shop.bambamboom.com/pages/about-us).

The css I added is:

#sub-footer {float:left; clear:both; width: 100%;}
#sub-footer .item-container {float:left; width: 33%; padding: 20px 4.5%; text-align: center;}
#sub-footer .item-container:first-child {border: 0;}
#sub-footer .item-container h5 {font-weight: bold;}
#sub-footer .item-container a {color: #a4a4a4;}

And the html is:
https://codepen.io/veroak/pen/YLZNmG

Any tip to make them stack?
Cheers!!

[veroak]

Thanks

[Beverleyh]

For .item-container: Use a media query to null the float and make the width 100%/auto at your desired breakpoint.

[Author]

Posts