Question

I'm pretty new to responsive design, please bear with me. I'm building my Dad's site for him & I applied the following css code to the logo image:

img.logo {max-width: 500px; width:100%; margin-left: auto; margin-right: auto; display: block;}

The problem appears when I try to make my browser more narrow. The image will scale down for a little bit, but then it stops scaling & gets cut off. You can see what I'm talking about on this page: http://cellphonerepairus.com/test/old/samsung.html

I've used the max-width: width-in-px; width:100%; successfully on another site. I even added max-height: height-in-px; height:100%; to no avail, so I removed it to see if that would help. Nope. I do have the viewport meta tag on my page. Someone please help me. Thank you!

Answer 1

Because of the padding on the logo, it will cause the logo to actually have a max-width of 530px. To prevent this, you can use box-sizing to tell the browser to include the padding in the width with border-box:

img.logo {
  box-sizing: border-box;
}

Or a calc() equation to remove the padding from the width.

img.logo {
  width: calc(100% - 30px);
}

Either piece of code will solve your problem.

Note: I normally use this code in all of my responsive sites.

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

Answer 2

It's the padding: 15px on .logo pushing the element outside of the viewport width.

You can either remove the padding, or add box-sizing: border-box;

.logo {
    text-align: center;
    vertical-align: middle;
    padding: 15px;
    box-sizing: border-box;
}

Logo cut off in mobile view

2 个答案: