Joomla! Forum - community, help and support

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

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

Mark

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

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 ?

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.