SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help resizing logo on responsive site

    Hello,

    I'm new to this forum and new to responsive web design. I'm having some issues with the logo in my header and wondering how I would go about making some changes. I'm not sure exactly where I would do this though. As I scale down the browser width to the various sizes the menu covers the logo and then when I resize to mobile width, I'd like the logo to move higher up and scale down in size. I'm hoping someone can help me with this. You can see what I mean when you go to my site and resize the browser width. Thank you for any help with this. www.m2mproperties.net

  2. #2
    SitePoint Addict
    Join Date
    Sep 2005
    Posts
    274
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You can use a media query to replace the image or change it's size and position when you hit the required benchmarks.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi, welcome to Sitepoint

    As mentioned above you should utilise media queries (ie9+) to change the look of the layout at smaller sizes.

    As an example you could change the position of the nav and logo at various widths like this:

    Code:
    @media only screen and (max-width:1200px){  
    #header h1{top:0}
    #header #nav{
    right:auto;
    left:0;
    }
    #header #nav a{
    margin-right:30px;
    margin-left:0;
    }
    }
    @media only screen and (max-width:500px){ 
    #titleBar .title img{max-width:50%;}
    }
    That code would need to go at the end of the last css file called. Or create a new css file (call it custom.css or similar) and place it last in sequence.

    Your page is complicated by the fact that you are introducing styles sheets with javascript based on the width of the viewport rather than using the standard method of using media queries. This makes it awkward to manage and you would need to add your custom css in the new style sheet as I mentioned above so that it over-rides any previous rules.

    Your site is not really responsive as such but a collection of fixed width layouts (apart from the mobile view (less than 500px) which is responsive!). You would have been better building the whole site to scale in this way rather than the 1000px and 1200px fixed widths you are designing for. There are so many tablets and devices around these days that the only way to cater for them all is to make the site fluid from large to small and therefore catch every device on the way.

  4. #4
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys very much for your help so far. I think I'm just going to scrap this site and start with a new one. I'm not really having any luck with the logo. I can really only get it to look good on the desktop sized browser.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I see you've started to change it already.

    To keep the logo image from overflowing at small widths add this:

    Code:
    .topBox img{max-width:100%}


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
  •