Home page paralax title mobile-responsive

Shapely
1

I am using a combination of the paralax widget for my home page title, and some CSS to make my title display the way I want it to (on desktop browsers). However, it is not mobile responsive.

The CSS I am using is:
/Hero image title edit/ #shapely_home_parallax-2 .image-bg h1 { color: #FFFFFF; font-size: 100px; font-weight: bold; text-shadow: 4px 3px 2px #000000; }

what do I need to add to make it responsive for mobile use?
the site is www.hopenetsa.org.au

Thanks!

2

hey there

You are very close to final design, update your code to this:

#shapely_home_parallax-2 .image-bg h1 {
color: #FFFFFF;
font-size: 100px;
font-weight: bold;
text-shadow: 4px 3px 2px #000000;
line-height: 100px;
}

3

Thanks for this.
is it possible for the text to remain in the two lines as per the desktop version, but just smaller in scale?
The code you have supplied is better than the jumbled mess it was, but can it be adjusted further?

4

Yes, sure, in this case, you have to wrap your code for small screen devices in this code:

@media only screen and (max-width: 600px) {
#shapely_home_parallax-2 .image-bg h1 {
font-size: 40px;
line-height: 40px;
}
}