Currently the logo in the header is a size of 350px in width. I need it to be a good size for the full width screen. However, when I drag my window to the size of a small phone the logo in the header is too big for the screen size and is cut off on the left and right margins. I am wanting the logo to fit at 100% in the header area without being truncated in any way. It only happens when the screen is smaller than 320px.
I hope this clarifies what I am trying to accomplish.
However, I would suggest sticking with the image instead of switching to a bg image. All you need to do is set the image to
max-width: 100%;
height: auto
[/QUOTE]
Hi Ralph. I tried adding the max-width 100% as you suggested but it has not made a difference.
I do have this code in one css sheet - inuit.css:
.logo,
.logo img{
display:block;
max-width:100%; /* Width of your logo in pixels (ideally a round grid-number) */
height:auto; /* Height of your logo in pixels */
}
Using the max-width: 100% on the image would imply removing the absolute positioning and the background image option for small screens. I should have specified that.
Inuit.css does have max-width: 100%, but the width: auto is overridden by the width set in the other style sheet:
So I’d suggest perhaps removing that height setting altogether, or at least placing it just in a media query for large screens. It’s getting in the way.
Thank you very much! That worked. I do notice one weeee change that has made to the menu which is now situated directly under the header to the right, where before, it was positioned in the header to the top right.
I find that when I remove the 100% width from on the logo, for the large screen, it pops back up to its correct position, naturally. And when I remove the “float:right;” from the nav menu, it pops back up into header area but not exactly in to the right top corner.
I could replace the float in the nav menu with a “display: inline;” but then it is situated directly under the logo to the left.
I’m not sure what the best solution or answer is to this.
These next two properties should not be part of #logo at full width; they should be added to #logo via the media query at the same point where the Home, About, and Contact buttons become center aligned (the media query with max-width:960px).
They seem to be in the responsive CSS already at line 265.
#logo {
width:100%; /* at narrow widths */
margin: 0 auto 1em; /* at narrow widths */
}
Likewise, the following selector should be added in that same media query (for narrow widths):
#logo img {
display: block;
margin: 0 auto;
}
The “#logo img” selector seems to be missing right now. Use the full selector as shown so only the image in #logo is affected.
I just took another look at my earlier dabbling. It was the 720px query where the buttons and logo image changed from their end positions to being center aligned. I’m not sure why I thought it was the 960px query in my last post. Something changed that didn’t register between my ears.
Thanks very much for all your effort with this. That did the job well. I find often scrolling through so many CSS files overwhelming and sometimes I just cannot connect the dots nor find what I am looking for! However, this has fixed my issue nicely thank you.
Code can be hard to read. I tend to write most of my HTML and CSS using indents rather than inline. “Ron readable”, I call it. :p. It’s much easier to understand, modify, or troubleshoot, especially a year or more down the road.