Header texts cover the content on mobile device

Store Design
, ,
1

Hello again community !
i have a problem i want to solve without affecting the desktop version , i have a custom theme on that i purchased from themeforest , i dont want the text contents on the header picture to cover the picture ,also i want to edit the header picture’s height, and i want these things to happen only on mobile version without affecting my desktop version design .
MY STORE’S LINK : https://bx461feb248yrl7a-70467289406.shopifypreview.com
EXAMPLE:

photo_5967790288686660137_y.jpg
photo_5967790288686660137_y.jpg590×1280 93.4 KB

MY STORE:

Screenshot 2023-02-01 at 11.44.34.png
Screenshot 2023-02-01 at 11.44.34.png748×1880 186 KB

2

Hello @Nersi

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :
@media (max-width: 767px){
  .sf__slide-media[style*="--aspect-ratio"]:before {
    padding-top: 380px;
  }
  .sf__slide-block .sf__slide-content{
    margin-top: 200px;
  }
}

Best regards,
GemPages Support Team

3

Hello GemPages team,
unfortunately it did not help , it’s still the same :disappointed_face:

4

Hi @Nersi

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/slideshow.css->paste below code at the bottom of the file:

@media (max-width: 767px) {
    .sf__slide-media[style*="--aspect-ratio"]:before {
        padding-top: 400px !important;
    }
    .sf__slide-block[class*="--middle-"] {
        align-items: flex-end !important;
        padding-bottom: 20px !important;
    }
}

I hope it would help you

1 Like
5

This helped ! thank you so much , this is exactly what i wanted :heart_eyes: