Container Padding

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

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…

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

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}
.doc-box{margin:1em 0}

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:

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;

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).

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

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