Header BG image Responsive width control

Hi there

This is probably a very basic issue, however, I’m not yet completely au fait with responsive css.

I’d like to know how I can fit the header logo (Clinch Auto) into the the smallest width. URL provided below including copy of the @media CSS below.

Would I need to add another @media with a smaller max-width and would I need to place a bg image containing less height than the current logo size?

Currently the logo is bigger than the smallest window size.

http://www.clinchautomotive.co.nz/Responsive/

CSS:

@media (max-width: 720px)
#logo {
margin: 0 auto 1em;
width: 100%;

It’s not really clear what you are trying to do. Could you be more specific?

Sorry, I’ll try to elaborate further.

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.

You could do something like this:

#logo {
background: url(../img/clinch-logo2.png) top center no-repeat;
background-size: 100% auto;
}

Though it won’t work so well currently on wider screens.

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

You could do something like this:

#logo {
background: url(../img/clinch-logo2.png) top center no-repeat;
background-size: 100% auto;
}

Though it won’t work so well currently on wider screens.

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

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 */
}

and this in another - eve-styles.css:

#logo, #logo img{display:block; width:350px; height:101px;}
#logo{float: left; background:url(../img/clinch-logo2.png) top center no-repeat; position: relative; margin: 0; z-index: 120; display: inline; /* fixes IE6 margin bug */}
#logo img{position:absolute; left:-99999px;}

but the second css is for display for full screen

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:

#logo, #logo img {
display: block;
width: 350px;
height: 101px; 
}

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.

Hi, Feliciaf.

Here’s something to try that centers the image and allows it to shrink at narrow widths. (delete the red properties)

I did not separate the media queries from the defaults except via the comments in #logo. Good luck :slight_smile:


#logo {
    [color=red]background: url("../img/clinch-logo2.png") no-repeat scroll center top rgba(0, 0, 0, 0);[/color]
    [color=red]display: inline;[/color]
    float: left;
    position: relative;
    z-index: 120;
    width:100%;  /* at narrow widths */
    margin: 0 auto 1em;  /* at narrow widths */
}

#logo img {
    display: block;
    [color=red]position: absolute;[/color]
    [color=red]left: -99999px;[/color]
    margin: 0 auto;
}

/* properties were moved from this combo of selectors. */
[color=red]#logo, #logo img
    display: block;
    height: 101px;
    width: 350px;
}[/color]



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.

Sorry, my bad, I haven’t tried to break down your code into the incremental media queries. Maybe this will be clearer.

#logo at line 44 should be:


#logo {
    float: left;
    position: relative;
    z-index: 120;
}

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.

Fingers crossed :slight_smile:

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. :rolleyes:

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. :slight_smile:

It looks to me like these entries need to be deleted from the 721px to 960px query:

eve-styles.css (lines 260-265)


#logo{margin:0 auto 1em; width: 100%;}
#logo img {
    display: block;
    margin: 0 auto;
}
#nav.main{margin: 0 auto;float: none; padding: 0.4em 0 0 0}

I believe that will do the trick.

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.

Cheers