How can I minimize header line spacing and text-image gap on mobile view?

Store Design
, , ,
1

Hi guys,

Would like to reduce gab between header lines, and gap between body text and image in mobile view

InkedScreenshot_20230111-161716_Chrome_LI.jpg
InkedScreenshot_20230111-161716_Chrome_LI.jpg1080×1920 171 KB

InkedScreenshot_20230111-161746_Chrome_LI.jpg
InkedScreenshot_20230111-161746_Chrome_LI.jpg1080×1920 259 KB

Thank you,

allianceautoproducts.com

2

@Alliance Put below css into theme.liquid file before closing tag

@media only screen and (max-width: 749px)
.template-index .section-header .h2 {
   
    line-height: 28px !important;
}
.custom-content .custom__item {
    width: 100%;
    padding: 0px !important;;
}
}

Ujjaval_0-1673446293948.png
Ujjaval_0-1673446293948.png1585×679 74.6 KB

Ujjaval_1-1673446365110.png
Ujjaval_1-1673446365110.png1599×655 113 KB

3

Mied }, and second code didn’t work through

Screenshot_20230111-171927_Chrome.jpg
Screenshot_20230111-171927_Chrome.jpg1080×1920 169 KB

4

Hi @Alliance

You can add code below

@media(max-width: 749px){
  #shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 > .page-width .custom-content {
    display: flex;
    flex-flow: column;
  }
  #shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 > .page-width .custom-content .custom__item {
    order: 2;
  }
   #shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 > .page-width .custom-content .custom__item--image {
     order: 1;
     max-width: none;
   }
}