cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Highlighted

Ascension Hero widget not responsive

Hello, 

 

I tweaked my Ascension header with Additional CSS to decrease the width, and I moved the hero text around as well. I'm afraid my CSS for this may have been a little slap-dash, but it worked.

 

I knew changing the hero would make it not responsive, however I can't seem to find a way to move the text so that it isn't out of place on a mobile screen. The hero text is too high, with one line above the hero image and overlaying our logo. I'm viewing the site on my iPhone Xs, if that makes a difference.

 

Our URL is: e-gia.com

 

I've tried to move the mobile hero text with:

 

@Media only screen and (max-width: 42em) {
.hero .widget.widget_text p {
font-size: 1.8em;
}
}

 

but adding any padding or positioning is only moving the button, not the text. Any help is appreciated! Thanks in advance