Shopify themes, liquid, logos, and UX
Hi, I have a problem with one section on the mobile version, on the customize page on the PC the section (on mobile) looks perfect but when I actually go to the website on my phone it looks terrible (bigger and lower than it should be). Can you help me have the same version on the phone as on the customize page? Thank you
Pass: biangu
Solved! Go to the solution
This is an accepted solution.
Hello @MT27
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 759px){
#shopify-section-template--18448488431883__image_banner_ffy68J .banner {
max-width: 100% !important;
width: 100% !important;
min-height: 17rem !important;
margin-top: -62px !important;
margin-bottom: -30px !important;
margin: auto;
}
#shopify-section-template--18448488431883__image_banner_ffy68J .banner__media {
max-width: 100% !important;
height: 27vh;
margin: auto;
margin-top: 5px !important;
margin-bottom: -1px !important;
}
}
</style>
Hello @MT27
Its Artzen Technologies! We will be happy to help you today.
Follow the below steps to solve the issue:-
1) Go to your Online Store
2) Edit Code
3) Find base.css file
4) Add the following CSS at the bottom of the file
5.) Save the File
Change the below screenshot css
To the one which I have show below
#shopify-section-template--18448488431883__image_banner_ffy68J .banner{
margin-top: -62px !important;
margin-bottom: 50px !important;
}
Let me know if need further assistance
Regards,
Artzen Technologies
This is an accepted solution.
Hello @MT27
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 759px){
#shopify-section-template--18448488431883__image_banner_ffy68J .banner {
max-width: 100% !important;
width: 100% !important;
min-height: 17rem !important;
margin-top: -62px !important;
margin-bottom: -30px !important;
margin: auto;
}
#shopify-section-template--18448488431883__image_banner_ffy68J .banner__media {
max-width: 100% !important;
height: 27vh;
margin: auto;
margin-top: 5px !important;
margin-bottom: -1px !important;
}
}
</style>
We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024