Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Nebula banner banner image

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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
  • heatherfsg's Avatar
  • heatherfsg
  • LIfetime Developer - Big Bamboo
  • 93 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Heather,

Do you still want the text to display?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • heatherfsg's Avatar
  • heatherfsg
  • LIfetime Developer - Big Bamboo
  • 93 posts
  • Karma: 0
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 6 years 3 weeks ago by manh.
The administrator has disabled public write access.
Hi Paul

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

esr_banner-eg.jpg



Sorry to be a nuisance and thanks for your help.

Best wishes

Heather
  • heatherfsg's Avatar
  • heatherfsg
  • LIfetime Developer - Big Bamboo
  • 93 posts
  • Karma: 0
The administrator has disabled public write access.
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}
}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Do you have a zen more enabled in the module settings?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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!
  • heatherfsg's Avatar
  • heatherfsg
  • LIfetime Developer - Big Bamboo
  • 93 posts
  • Karma: 0
The administrator has disabled public write access.
Thanks for the update :)

Cool - you're welcome

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

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers