SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code:
    @media (max-width: 720px)
    #logo {
    margin: 0 auto 1em;
    width: 100%;

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's not really clear what you are trying to do. Could you be more specific?

  3. #3
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could do something like this:

    Code:
    #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

    Code:
    max-width: 100%;
    height: auto

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could do something like this:

    Code:
    #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

    Code:
    max-width: 100%;
    height: auto

  6. #6
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

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

    example-logoissue.jpg

    I do have this code in one css sheet - inuit.css:

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

    Code:
    #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
    Last edited by Feliciaf; Apr 2, 2014 at 19:18. Reason: Took out other content not required

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #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.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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
    Code:
    #logo {
        background: url("../img/clinch-logo2.png") no-repeat scroll center top rgba(0, 0, 0, 0);
        display: inline;
        float: left;
        position: relative;
        z-index: 120;
        width:100%;  /* at narrow widths */
        margin: 0 auto 1em;  /* at narrow widths */
    }
    
    #logo img {
        display: block;
        position: absolute;
        left: -99999px;
        margin: 0 auto;
    }
    
    /* properties were moved from this combo of selectors. */
    #logo, #logo img
        display: block;
        height: 101px;
        width: 350px;
    }

  9. #9
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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
    Code:
    #logo {
        background: url("../img/clinch-logo2.png") no-repeat scroll center top rgba(0, 0, 0, 0);
        display: inline;
        float: left;
        position: relative;
        z-index: 120;
        width:100%;  /* at narrow widths */
        margin: 0 auto 1em;  /* at narrow widths */
    }
    
    #logo img {
        display: block;
        position: absolute;
        left: -99999px;
        margin: 0 auto;
    }
    
    /* properties were moved from this combo of selectors. */
    #logo, #logo img
        display: block;
        height: 101px;
        width: 350px;
    }

    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.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    #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.
    Code:
    #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):
    Code:
    #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

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. :-)

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Feliciaf View Post
    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. :-)
    It looks to me like these entries need to be deleted from the 721px to 960px query:

    eve-styles.css (lines 260-265)
    Code:
    #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. . It's much easier to understand, modify, or troubleshoot, especially a year or more down the road.

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •