Container Padding

HTML & CSS
1

Hello, In my viewport view of my website in a very small
view, I get horizontal scroll bars** SITE**

337×954 51.3 KB

and it is not getting my padding correctly too on
my div container: (the padding right)

.container {
  padding-left: 15px;
  padding-right: 10px;
  margin-right: auto;
  margin-left: auto;
}

Im guessing it is something within my content divs
that is doing that as i debugged it a bit…

2

part of the problem is you have widths of 100% AND you have padding, which adds width AFTER the size calculation is done…

3

Have you looked at your page in Firefox or IE? You have a scrollbar from about 770px downwards and the page doesn’t get any smaller.

It looks like your images are too big.

Try these tweaks.

.panel-body img{max-width:983px;width:100%;height:auto}
img{max-width:100%;height:auto}
.doc-box{margin:1em 0}
4

Im guessing those browser are not interpreting my code
I have for those images like other browsers?

I should probably use width:100% rather than max-width:100% right?

I read here that the max-width is a better approach: http://www.w3schools.com/css/css_rwd_images.asp

7

wow :expressionless:

eh I removed the padding, ill just add the padding where necessary

.container {
/*  padding-left: 15px;
  padding-right: 10px; */
  margin-right: auto;
  margin-left: auto;
}
8

Seems to be working now so must have been an error somewhere.

It depends on what you want to happen?

100% will make the image as wide as the container whereas as max-width only kicks in if the container is smaller than the image width (which menas the image stays at its natural size if the container is larger).

9

yeah seems like it but I mean I was targeting the same classes
but those browsers were not interpreting my code so go figure I guess…:joy:

right ok

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.