Gap between hero banner and rich text sections

Ask & Offer
1

Hi everyone,

I am having an issue. A friend of mine edited the base.css file, which resulted in creating a gap between the hero banner section and the rich text section. I am trying to adjust the height of the banner by increasing the pixels, but the more I increase the numbers, the bigger the gap becomes. The theme editor is, hence, controlling the height. I was really frustrated by numerous attempts to resolve the issue. I would be grateful if any of you could please suggest a solution to the issue. The store’s URL is: https://adistore.co.uk

Thanks

Sajjad Haider

1 Like
2

Hey @MuhammadHaider,

In order to do the requested changes requires to do the custom code in your theme file.

Could you please share the 4 digits collab code along with the store url in the p/m so that I can take a look and make the requested changes.

Thanks

3

Hi @MuhammadHaider

You can use this custom CSS

#shopify-section-template--22934932193619__rich_text_ifGT7z {
    padding: 0 !important;
}

#1 Open Customize theme

image
image1920Ă—939 72.3 KB

#2 Add custom CSS to section. Like this:

image
image1920Ă—1265 87.3 KB

Result

image
image1920Ă—1003 111 KB

Let me know if it works for you!

Best,

Danny from Samita Team

4

Please add this code to your base.css file

@media (min-width: 750px) {
.ai-hero-banner-image-adjlobfuyq09ncdu0aaigenblocka23fcfb9rmgfh { max-height: max-content; }
}
5

Couple of hints:

  1. Do not add code like this to your stylesheet:
/* Rich Text section: directly under Hero Banner */
#shopify-section-template--22934932193619__rich_text_ifGT7z {
  margin-top: 0 !important;
  padding-top: 4px !important;       /* mobile top padding */
  padding-bottom: 56px !important;   /* keep bottom padding */
}

/* Desktop adjustments for Rich Text */
@media screen and (min-width: 750px) {
  #shopify-section-template--22934932193619__rich_text_ifGT7z {
    padding-top: 8px !important;     /* slightly more top padding */
  }
}

Section ID may change when you duplicate your theme and these selectors will no longer apply.
Use “Custom CSS” in the section settings and Shopify will scope your code to this section automatically.

  1. You’re adding padding on the section itself, but this only increases the white gap. You should target the .rich-text element in this section instead.

So – remove the code above from the base.css and add this to the sections “Custom CSS” (shopify will scope it automatically, as I said above)

.rich-text {
  padding-top: 4px;
  padding-bottom: 56px;
}

@media (min-width:750px){
  .rich-text{
     padding-top: 8px;
  }
}
6

Hi @MuhammadHaider,

Please go to Customize > Theme settings > Custom CSS and add code:

img.ai-hero-banner-image-adjlobfuyq09ncdu0aaigenblocka23fcfb9rmgfh {
    max-height: none !important;
}
7

Hi Namphan,

Thanks for your help. The problem is solved, but there appeared a gap between the hero banner section and rich text section. Any advice/help would be highly appreciated.

Thank you once again.

Muhammad Haider

8

Hi @MuhammadHaider,

I tested and it shows fine, can you send me gap screenshot?

I will check it.

9

Hi @namphan

Sorry for the confusion. I missed mentioning that the gap is between both sections on mobile and not on desktop. You were right.

Thanks for your support.

10

Thanks Tim. I placed the code in the Custom CSS in Rich Text Section. How long Shopify takes to recognise it.
Thanks once again for your help and time. Looking forward to get more help from you in the gap still stays.

11

Hi @MuhammadHaider,

Please add code:

@media screen and (max-width: 749px) {
    .ai-hero-banner-adjlobfuyq09ncdu0aaigenblocka23fcfb9rmgfh {
        min-height: auto !important;
    }
.ai-hero-banner-content-adjlobfuyq09ncdu0aaigenblocka23fcfb9rmgfh {
        padding-bottom: 0 !important;
    }
}

If I helped you, then a Like would be truly appreciated.

1 Like
12

Hi, I placed the code in base.css file but the gap still there on mobile. However, I have left a like with heart for your help and time. I would definitely appreciate it if you could please further guide me.

13

With all that code you’ve already have there, try adding this as well:

[class^=ai-hero-banner]:has(img) {
  background-color: #f3f3f3;
  height:auto;
  min-height: 0;
}
[class^=ai-hero-banner]:has(img):before {
  content:'';
  width: 0;
  padding-top:55%;
}

This should help with the black gap.

14

Hi @Tim_1
Thanks for your help. Where exactly I have to add this code?

15

“Custom CSS” setting of this section.
But give you’ve already modified your theme, it can go wherever you’ve pasted other codes…

16

Hi @tim_1

Thanks and I appreciate your guidance.

1 Like
17

Hey @MuhammadHaider,
We are happy that you found ti well.

18
  • I’m having trouble with my store’s hero banner: • The mobile hero banner leaves extra blank space on mobile. • The Desktop hero banner image gets cropped in height • I’ve tried custom CSS but can’t fix these issues.
19
  • Regarding extra blank space on mobile, please turn off Stack text below image or Container option under Mobile layout of Image banner or Slideshow section.
  • Regarding hero banner image getting cropped, you can change Height settings of Image banner or Slideshow to Adapt to image