Hello, I have a custom liquid here that I have coded the custom css width set to 35%. Shows great on desktop but I would like the mobile view set to 87%. How do I do this?
https://qaptmusic.myshopify.com/
same deal with my contact form
@QAPT please add this css to the very end of your base.css file and check
@media screen and (max-width:749px){
#shopify-section-template--16809027076284__custom_liquid_A9h9Bk{width: 87% !important;}
}
@QAPT - revmoe that css and add this one and check
@media screen and (max-width: 749px) {
#MainContent #shopify-section-template--16809027076284__custom_liquid_A9h9Bk{width: 87% !important;}
}
1 Like
Perfect thanks!
Can i also ask about the contact form on the contact page? I would like the desktop width 35% and mobile 87%
@QAPT - form is already 87% on smaller screens, so if you want it 35% on desktop, please add this css and check
@media screen and (min-width:750px){
#MainContent #shopify-section-template--16809027141820__form{width: 35%;}
}
1 Like
Perfect thanks for your help!
1 Like
@QAPT - welcome, do let me know if you need any updates later.
1 Like
If you’d like I have a new post about the menu in header https://community.shopify.com/c/shopify-design/header-menu-page-in-collapses-into-hamburger-in-mobile-view/td-p/2544803