Solved

Fix section on mobile version

MT27
Explorer
67 6 3

 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

 

URL: https://matibrnd.com/

Pass: biangu

 

MT27_0-1706092646104.png

MT27_1-1706092724143.png

 

Accepted Solution (1)

techlyser_web
Shopify Partner
1004 188 189

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>

techlyser_web_1-1706093737751.png

 

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 2 (2)

Artzen_tech
Shopify Partner
528 105 104

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

Artzen_tech_1-1706093122615.png

 

To the one which I have show below

Artzen_tech_0-1706093045798.png

#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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

techlyser_web
Shopify Partner
1004 188 189

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>

techlyser_web_1-1706093737751.png

 

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com