How to adjust image banner padding of text to center

Store Design
1

On mobile, I’ve added the following code to my themes.liquid so that my main hero banner (Which has a transparent header) won’t touch the navigation bar.

@media screen and (max-width: 767px) { a#HeaderMenu-bulk-order { display: none !important; } .banner__box { padding-top: 150px !important; } } .header-wrapper { border: unset !important; }

Problem is, now it adjusted all my image banners, I just need it to take effect on the topmost hero banner. How can I keep the look of the hero banner but adjust the other image banners so that the texts are in the middle?

Others.png
Others.png467×687 242 KB

Only for mobile.

LOG IN DETAILS:

https://kanzen-farming.myshopify.com/

pw: kanzenfarming2024

Thank you!

2

@GLSatellite Hey, thanks for posting here.

I hope your theme (dawn) customizer having this settings

3

Hi @GLSatellite ,

To ensure that the padding adjustment only affects the topmost hero banner and not all image banners, you need to target the specific section or class of the topmost hero banner in your CSS. Here’s an updated approach:

Updated CSS:

Add class=“hero-banner-top” to your topmost banner in the Liquid code. Example:
4

Hi there,

I hope you are well.

Please replace the red mark from the screenshot below:

Screenshot_1.png
Screenshot_1.png1031×475 88.3 KB

With this code:

main#MainContent > section:nth-child(1) .banner__box

Then the code should be:

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team

5

You’re amazing! Thank you so much! I really appreciate it and thanks for getting back to me so quickly :slightly_smiling_face: