SHOP: https://6lup41monw46ltmk-55358554265.shopifypreview.com
i need my custom liquid on the main page under FOLLOW US to have the same layout in mobile view… it’s very messy looking . any idea what code to fix?
thank you so much!!!
To make the custom liquid on the main page under FOLLOW US have the same layout in mobile view, you can modify the CSS code.
Here’s an example of what you can add to your CSS code:
css
@media only screen and (max-width: 767px) { .custom-liquid { display: block; text-align: center; margin: 0 auto; max-width: 300px; } }
Replace .custom-liquid with the class name of the section that contains your custom liquid. This CSS code will center the section, set its max-width to 300px, and display it as a block element on screens with a maximum width of 767px (mobile devices).
You can add this code to your theme’s CSS file by going to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid.
Remember to test the changes on multiple devices to ensure that it works properly.
1 Like
thank you i will try this to see if it works and let you know!
is there a way also to make sure the FOLLOW US header stays aligned with the NEW ARRIVALS header in all mobile, desktop and full screen mode? it keeps moving farther to the left
Yes, you can use CSS to align the “FOLLOW US” header with the “NEW ARRIVALS” header on all screen sizes. Here’s an example of the CSS you can add to your theme:
Css
@media only screen and (max-width: 767px) { .header-bar__module:nth-child(2) { text-align: center; width: 100%; margin-top: 20px; } }
This code will center the “FOLLOW US” header and make it full-width on screens with a maximum width of 767px (mobile devices). The margin-top property is optional and can be adjusted to add some space between the headers.
You can add this code to your theme’s CSS file by going to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid.
Again, make sure to test the changes on multiple devices to ensure that they work properly.