how can I display these small icons on mobile like shown below? website: www.10xfuel.com
thank you!
Topic summary
A user seeks help rearranging small icons on the mobile version of their Shopify store using the Dawn theme. They provide their website URL and reference an image showing the desired layout.
Solution Provided:
- Another user offers CSS code to be added to the theme.liquid file above the
</body>tag - The CSS targets screens with max-width of 989px (mobile devices)
- Modifies
.griditem properties: sets width to 49%, max-width to 100%, and adds 45px bottom padding - Uses
!importantflags to ensure the styles override existing theme CSS
Status: The discussion appears resolved with a technical solution provided, though no confirmation of implementation or success is included.
Hallo @10xfuel
Please add this css to theme.liquid file above tag
@media screen and (max-width: 989px){ .grid--1-col-tablet-down .grid__item { width: 49% !important; max-width: 100% !important; padding-bottom:45px !important; } }
1 Like