How can I correct section display issues on mobile version?

[MT27]

 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

[Artzen_tech]

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

[niraj_patel · 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>