Full width logo issue

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
carlanw
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Nov 25, 2006 12:16 am

Full width logo issue

Post by carlanw » Thu Dec 27, 2012 9:10 pm

Problem:

When logo is full width of div.header (940px) and you have a window size between ~751px and ~963px the logo hangs off the right edge of div.container. This behavior happens in Firefox and IE but not Chrome (in Chrome the logo scales)

Desired result:

What I would like to have happen is the logo re-size like it does when the window width is less than 751px. Once the 'transition' happens the logo is the right width.

Thanks for any help.

Cw
You do not have the required permissions to view the files attached to this post.
Last edited by carlanw on Wed Jan 02, 2013 4:39 pm, edited 1 time in total.

Markstein
Joomla! Hero
Joomla! Hero
Posts: 2268
Joined: Sat Feb 09, 2008 8:27 am
Location: California, USA

Re: Full width logo issue

Post by Markstein » Wed Jan 02, 2013 4:47 am

Do a Google search for "fluid images" and you should find your answer.

Mark

carlanw
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Nov 25, 2006 12:16 am

Re: Full width logo issue

Post by carlanw » Wed Jan 02, 2013 4:39 pm

Markstein wrote:Do a Google search for "fluid images" and you should find your answer.

Mark
Thank you Mark, that is exactly what I was needing! Appreciate it very much.

Cw

BigDutch
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Wed Oct 04, 2006 2:42 pm

Re: Full width logo issue

Post by BigDutch » Thu Feb 14, 2013 2:18 pm

carlanw. what did you do to solve your problem ? I am experiencing the same end-results as detailed in your original post.

Markstein. I have read on the fluid-images and from i see the img entry in the css file contains max-width: 100%, but only once the browser page goes below 768px does the header logo/image seem to pay attention to the max-width setting of img css entry ?

Feldon
Joomla! Intern
Joomla! Intern
Posts: 69
Joined: Tue Feb 20, 2007 9:58 pm

Re: Full width logo issue

Post by Feldon » Sat Apr 06, 2013 12:51 am

The problem is that the <a> element that contains the logo is set to float:left, whereas its parent <div> is set to float:none. As soon as you set an object as floating, its taken out of the flow and basically gets to grow as big as it wants - in this case, to the full-width of the <img>. Given that the <a> object can be as big as it wants, you can see why applying max-width:100% to the <img> object won't do anything - it can have whatever width it wants.

To fix it, I think all you need to do is apply the max-width:100% to the <a> object, which will cause it to have a width no larger than its parent container (even though the <a> object is floating). Note: This won't work if you apply a left/right margin to the <a> object, but by default its set to auto/0 so shouldn't be a problem.


Locked

Return to “Templates for Joomla! 3.x”