Trying to control the text size and placement of image with overlay text for mobile only. Help?

Technical Q&A
1

Hi -

I’m trying to control the text size and placement for my image with overlay text. Site is here: https://par6golfco.com/

I believe the code for the font should look something like this (placed in styles.css) but I’m very likely wrong. Code for moving it down on mobile only I’m not sure about. Any help is very appreciated!

@mediascreen and (max-width: 640){

div.overlay-text__subheading subheading subheading–over {font-size: 10px;

}

}

@mediascreen and (max-width: 640){

h2.overlay-text__title.h1-style {font-size: 14px;

}

}

Could anyone take a look and confirm?

Thanks a bunch!

2

I was able to solve the font sizing adjustment - now I just need to know how to push the font down a bit.

3

hello @par6golfco

please Go to Online Store->Theme->Edit code then go to assets/style.css ->paste below code at the bottom of the file.

@media (max-width: 768px){
#shopify-section-1626796601dd3283ce .overlay-text__inner{
	    margin-top: 500px!important;
}
}