Responsive hero + text

[nboote]

Hi! I have minimal understanding of CSS and my website currently makes me want to pull my hair out. It looks great on my desktop but as soon as I view it on anything smaller the text cuts off (because it’s not responsive) and the hero images are still huge.

My website is www.natashaboote.com

I need both the image / text overlay to be responsive (I’m going fo this look: www.checheluna.com).

Any help on the most efficient or practical way to do this would be so much appreciated.

[Joao]

Hi There,

Please add the following CSS to Cornerstone CSS

@media(max-width: 769px) {
#hero1 blockquote {
font-size: 35px;
margin: 0px;
}
}

Also on your first section set the padding top using % instead of px, for example 15% instead of 250px. It will respond much better on mobile.

Another alternative is to use instead of padding top a gap element, the gap element has the feature which you can select on which screensize you want to hide it, so you can have a 250px gap for desktop and another of 50px for mobiles.

Hope it helps