Hi Everyone, I have a WordPress site ( just in test mode ) and my logo is not showing up in its full size ( which is 600 px wide. ) This is a responsive theme ( Virtue ) when I reduce the screen size the logo does show up in its full size. But when it is on a 1600 px wide screen the logo shows up as smaller than its size. The CSS for the logo seems to have the height set to 100%.
img {
max-width: 100%;
height: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
How can get the logo to show in its full size when it is a wide desktop screen? Is this issue of logo container? Please help… link to my site is … my site
And what size in pixels is it?
@Mittineague the logo is 600px X 137px… I hope that’s what you wanted to know…
Even when it
Are you certain this isn’t only perceptual due to the increased view-port size?
Mittineague, when it is on a wide screen desktop the logo size is 362X86.
and when the screen size reduces to 740 px wide the logo is then 600 px wide…
Yes, I am pretty sure it is not just due to increased view-port size…
Hmmm, that is bizarre and sorry, but TBH it makes absolutely no sense to me.
I know % goes off the containing element, but I can’t think of how wider could result in smaller.
@PaulOB @ronpat @RyanReese
I could learn something here if you have any ideas
At a brief glance, it looks to me as if your logo is only expanding large enough to fill the gap before your navigation menu; the menu is what’s constraining the logo size. At narrower widths, your menu switches to “hamburger” style, allowing the logo to enlarge.
1 Like
I’ve just looked at it in the IE9 devtools and would concur.
Impossible to tell without a website. Your image does seem to be set to constrain within parent dimensions. This would lead me to beleieve your HTML structure is dictating the width of the image.
Without more, we can only guess.
Oops - I see you did link the website; one moment.
It’s showing up bigger because in the smaller screens, the col-4 div parent is too small a width (screen wise) to activate the column code (since it will only activate medium+ screens.) So on smaller screens the div runs the full width of hte page and as a result it will expand hte logo appropriately to whatever size it can handle.
Going up to medium screens, it’s restricted to 4/12 column width which is 33% and obviously that’s less width, which means the column has much less room to spread out. That’s why “bigger screens” result in a smaller logo.
Now, to make this universal you could change your column code to be “col-sm-4” and “col-sm-8”. I dunno what overall look you are going for. But that’s why your logo is weird 
.
2 Likes
Thank you everyone…
@RyanReese thank you very much for your detailed answer that really helped me to understand what is gong on. What tools/methods do you use to figure out information like
? Is it possible to know which media query is active at a certain screen size?
Look at the media query and see what screen widths it will activate at .
RIght click → Inspect Element. That’s all I use for the most part.
1 Like
Thank you very much for the help so far!. Right clicking and inspecting it, is something I haven’t done so much. I have lots to learn it looks like. I am trying to find out what CSS rule decides the NAV menu to break the line and push down to the second line at 1182px wide screen. Please see attached image. I tried to understand what is happening using the inspect tool but I am not able to figure it out? Is there a media query I am missing…? Or is it just breaking the line to accommodate the screen size?
Thanks again for your patience with me,
There just isn’t enough room. In fact, if it wasn’t for the virtue.css’s media query (min-width:1200px condition) then it would stay wrapped forever as it is now.
@media (min-width: 1200px)
.container {
width: 1400px;
}
That’s causing your page to not break, but at the same time you introduce scrollbars and creates another issue.
Can you please elaborate on this part please?
Do you not see scrollbars at 1200px viewport width? You should; because the container is set to 1400px. Fixed widths are a big no-no.
@RyanReese thank you very much! I didn’t notice the scroll bar …that opens up new areas to learn 
I added the width there to make the NAV to show in one line without breaking it. The original CSS rule was like below… And when I changed the width to 1400px it fixed the NAV menu and showed it one line without breaking it but introduced the horizontal scroll bar, is there a work around this? Sorry if this is a dumb question…
@media (min-width:1200px) {
.container {
width: 1170px;
You should ideally not be setting widths like that.It’s fine, and does the job, but ideally your layout is FLUID, not fixed (like you have) and by doing this, very very few media queries will be needed to get your optimal display in all viewport sizes.
1 Like
