Help resizing logo on responsive site

HTML & CSS
1

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

You can use a media query to replace the image or change it’s size and position when you hit the required benchmarks.

3

Hi, welcome to Sitepoint :slight_smile:

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:


@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

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

I see you’ve started to change it already.:slight_smile:

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


.topBox img{max-width:100%}