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.

logo image not responsive and content aware

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

Hi,

two problems I would like to get help with.

when setting the logo in moments template by using an image the content underneath like tagline and menu button do not get positioned downwards. Instead the logo overlays the other content.
Second problem is that the logo image is not reponsive.

the image that is used is a standard size logo but of course bigger than the one textline. being limited by the template to a super duper extra small logo is probably not the case here.

So how to solve those problems?
Thanks
Martin
ps: the class that is attached by t3 is .logo-image. This is not set by any less or css code. site is on local dev
  • Martin T.'s Avatar
  • Martin T.
  • LIfetime Developer - Big Bamboo
  • 16 posts
  • Karma: 0
Last Edit: 9 years 3 months ago by Martin T..
The administrator has disabled public write access.
Do you have a link?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
thanks for getting back.
no sorry. its on local dev. but the problem is in the template itself. fresh installation. change logo to image. errors already there.
  • Martin T.'s Avatar
  • Martin T.
  • LIfetime Developer - Big Bamboo
  • 16 posts
  • Karma: 0
Last Edit: 9 years 3 months ago by Martin T..
The administrator has disabled public write access.
With it being a sidebar base template its a little different - how big is the image?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
thanks for acknowledeging this false behaviour.
this logo image is a bigger (round about 300px in height) due to its edgewise design. but almost anything that is a little bit higher is creating these problem. sidebar or not...responsive is responsive. it should resize when on mobile when its an image. and of course be content aware with any size of image so that menu and tagline go down depending on image height. thanks a lot
  • Martin T.'s Avatar
  • Martin T.
  • LIfetime Developer - Big Bamboo
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Martin,
Sorry about the trouble. It's strange we havent noticed this issue before but it's definitely a bug.

Ill add a fix to the template but for now could you add this to a custom.css file and let us know if it solves it for you:

#navigation .logo a span {position:relative;margin-left:0}

For small screens because of the way the images behave we need to add another rule like this:

@media screen and (max-width:787px) {
#navigation .logo img {
max-width:300px
}
}

The max-width may need to be edited depending on the height of the image. In my test here that should work fine.

The final fix will look different to this but it should fix it for you in the meantime.
Let us know how you get on.
Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
HI Anthony,

sorry for the late feedback. Yes that kind of works. In responsive view its still too large. Edgewise images in that case can be better sized with max-height. So i did that. All in all I would prefer a floating div way. I think I will change that in the files. Since I'm tweaking other stuff as well I don't bother.
What approach are you taking by fixing this finally?

Btw: In /less/layout/logo.less you have a typo in line 48:
text-aalign:center

Another question. Why did you choose one "shadow"-line to be done by the background color? At k2 content for example or at the navigation sidebar. Instead of setting 1px solid #color there is a 1px gap between those elements causing the line to be done by the background.
change this and you will see the effect in the sidebar:
html > body {
background-color: #FF0000;
}
I'm asking because I will take a background-image. And then this needs to be of course set so that it doesnt "shine trough."
This is done in main content elements too.
At k2 element (article) in main container there are multiple places where the background is set again. Any reason for that instead of leaving it blank? I will remove those since my background image wont be visible.
I need to change those backgrounds or remove certain ones. As well I will have to change the bottom look with the effect of multiple pages by adding 1px solid #color to article to avoid that the background is shining trough here as well.

Thanks for your feedback.
Cheers mate
Martin
  • Martin T.'s Avatar
  • Martin T.
  • LIfetime Developer - Big Bamboo
  • 16 posts
  • Karma: 0
Last Edit: 9 years 3 months ago by Martin T..
The administrator has disabled public write access.
Sorry this one has slipped through the net - are you looking for assistance with above?

Anthony is currently away so design based questions can be tricky to answer

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

thanks, no problem. I can and figured the stuff out on my own. Still it would be great if Anthony could get back to these topics when he returns. when will this be?

Thanks.
Cheers
Maritn
  • Martin T.'s Avatar
  • Martin T.
  • LIfetime Developer - Big Bamboo
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Martin,

Apologies for the delay.

Ill get a fix for this tomorrow.

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.

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

Happy Campers