The Joomla! Forum ™

Download

Demo


Board index » Joomla! 3.x - Ask Support Questions Here » Templates for Joomla! 3.x » Default template: Protostar in Joomla! 3.x

Forum rules


Please click here to view the forum rules



Post new topic Reply to topic  Page 1 of 1
  [ 5 posts ] 
  Print view Previous topic | Next topic 
Author Message
carlanw
 Post subject: Full width logo issue
PostPosted: Thu Dec 27, 2012 9:10 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Nov 25, 2006 12:16 am
Posts: 3
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.

Top
 Profile  
 
Markstein
PostPosted: Wed Jan 02, 2013 4:47 am 
Joomla! Hero
Joomla! Hero

Joined: Sat Feb 09, 2008 8:27 am
Posts: 2132
Location: California, USA
Do a Google search for "fluid images" and you should find your answer.

Mark
Top
 Profile  
 
carlanw
PostPosted: Wed Jan 02, 2013 4:39 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Nov 25, 2006 12:16 am
Posts: 3
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
Top
 Profile  
 
BigDutch
PostPosted: Thu Feb 14, 2013 2:18 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Oct 04, 2006 2:42 pm
Posts: 13
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 ?
Top
 Profile  
 
Feldon
PostPosted: Sat Apr 06, 2013 12:51 am 
Joomla! Intern
Joomla! Intern

Joined: Tue Feb 20, 2007 9:58 pm
Posts: 60
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.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 5 posts ] 


Board index » Joomla! 3.x - Ask Support Questions Here » Templates for Joomla! 3.x » Default template: Protostar in Joomla! 3.x

Who is online

Users browsing this forum: No registered users and 6 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group