I'm using the Nebula template on the following website;

fsgtestsite.co.uk/esrRegister/index.php/about-esr

Is there a way that when the browser window is made smaller, the image on the right of the top banner doesn't disappear?

Many thanks in advance

Heather

Hi Heather,

Do you still want the text to display?

Cheers
Paul

Hi Paul

Yes, ideally I would like the text to sit above the image when the browser is made smaller.

Thank you very much for your help.

Heather

Hi Heather,

It doesn't look that good with the text but try

@media (max-width: 920px) and (min-width: 320px) {
#banner .zentools .grid_six {width: 48% !important;}
}

@media (max-width: 880px) {
#bannerwrap .zenimage {display: inherit !important;}
}

Cheers
Paul

Alternatively don't add the first media query and see how much you can adjust the text sizing to adjust the image space via another media query

Cheers
Paul

Hi Paul

Sorry, I'd meant something like the attached, so the image is stacked underneath the copy rather then at the side.




Sorry to be a nuisance and thanks for your help.

Best wishes

Heather

Not sure exactly how to get the full image so I ended up with

@media (max-width: 880px) {
#bannerwrap .zenimage {display: inherit !important;}
h2 {font-size: 20px; line-height:26px;}
.zentools .zenmore {margin: 0;}
#bannerwrap {margin-top:60px}
}

Do you have a zen more enabled in the module settings?

Cheers
Paul

That's looking a lot better, thank you so much! I just added the following code to yours so that the full image is in view

.fixedheight #gradient {
margin-top: 600px;
}

Thanks again for everything!

Thanks for the update

Cool - you're welcome

I was uncertain about suggesting that one - given how it may affect other devices

Cheers
Paul