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

Ascension Hero widget not responsive



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:


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