Hey anyone who understand coding, please help me!

Store Design
, ,
1

Hi there, I’ve got this issue where on the first section of my home page, I have this massive gap which when you enter as a mobile customer, you basically don’t see anything except for the gap and the line below. (The blue part above “the smile of your dreams…”)

I’ve tried Sidekick to generate a code, it works but there is something with it that when saving it goes back to normal.

If anyone please understands and knows how to solve this, please do, I’ll leave the code and a screenshot here, thank you!

Code by Sidekick:
@media screen and (max-width: 749px) {
.shopify-section–hero,
.hero-section,
[class*=“hero”] {
margin-top: 0 !important;
padding-top: 0 !important;
}

.shopify-section–hero .container,
.hero-section .container {
padding-top: 0 !important;
}
}

Lines that supposedly are truncating the code from working:
.shopify-section–hero,
.hero-section,
[class*=“hero”] {

Captura de pantalla 2025-12-22 a las 19.07.08
Captura de pantalla 2025-12-22 a las 19.07.081920×976 214 KB

2

Hi @Comari

To reduce space on mobiel try this code

@media screen and (max-width: 749px) {
	.hero-data {
        padding: 10px 20px 41px 20px;
    }

    .hero-left {
        height: 265px;
    }
}

Add it after you rule for onts in Custom CSS block. And if needed adjust values 10px and 265px to match space.

3

That’s because you’re trying to target elements that don’t exist in that section.

The selectors are:

.hero-container

.sub-container

.hero-data

.hero-flex-container

.hero-left

4

THANK YOU!
This worked, you saved me, I really appreaciate it