Does anyone know how to make the image with text overlay lower on mobile?

Store Design
1

On desktop it works fine, the code I used to lower it is,

.hero__inner {
padding: 33% 0 0 0;
}

But when I go unto mobile the text mashes into the image.

2

You should use media queries to create device size specific CSS

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

3

Hi, @KevinFeldman
Give me Your Site URL so,
I can give you proper solution.
Thank You!

4

Thanks a lot, the url is VIbedd.myshopify.com

and the password is: 1298

5

client problem.png
client problem.png372×248 49 KB

Do you want like this.

6

Yes please, but it doesnt work on mobile

7

okk I will solve this.

8

Paste this code in top of theme.scss.liquid file.

@media only screen and (max-width: 600px) {
.mega-subtitle--large p {
    margin-top: 90px !important;
}
}

Thank You!

9

Hey, it still doesn’t work. Also this issue of the text not lowering only occurs in vertical mode on mobile not horizontal. Any other ideas? Thanks for trying to help though

10

Try using the above code snippet, though change the 600px to 749px