Full viewport width

Question

On my site, I'm trying to make my images fill the viewport width on mobile only, but with grids there's the padding, so when on mobile there's that bit of white space on both sides.

Example: On Microsoft's site, as you resize the browser the padding goes away on the main image and fills the width of the viewport, but the thumbnails keep their paddings. What I'm trying to achieve is what's happening on the main image.

Markup:

<div class="container">
  <section class="row cf">
    <div class="grid-full">
        <article>
          <img src="/path/to/image/sample.jpg" />
        </article>
    </div>
  </section>
</div>

CSS:

.container {
  max-width: 1000px;
  width:92%;
  margin:0px auto;
  position: relative;
}

.grid-full {
  float: left;
  width:96.969696969697%;
  margin:0 1.515151515152% 1em;
}

I've tried playing around with padding, margin, and width but I'm not successful.

score 0 · Answer 1 · edited May 23 '17 at 11:57

The best answer is to use css media queries. This allows you to dynamically change your css by checking what width screen somebody has (essentially what device they are on.)

Information regarding that can be found here. What does @media screen and (max-width: 1024px) mean in CSS?

Looking at your site, the reason your images will not extend to be the full viewport is because of your container. The container has a set padding on it. One way to get around this padding would be to use a negative margin, such as, margin:auto -20px;.

The best solution would be to consider using media queries and work around the problem, possibly modifying your container or such during mobile view.

Hope this helped.

score 0 · Answer 2 · answered Mar 14 '14 at 07:02

0

@media screen and (min-width: 640px)
 .grid-6, .grid-full {
 width: 100%;
 margin: 0;
}

@media screen and (min-width: 480px)
 .container {
 width: 100%;
}

It is going to work i believe :)

answered Mar 14 '14 at 07:02

agriboz

4,724
4
35
49

Careful with this though, it will cause EVERYTHING to no longer have the simulated padding / margins. Everything being children of container :D – Tristan Mar 14 '14 at 07:04
Have you ever tried giving negative margin to container? – agriboz Mar 14 '14 at 07:13
I agree with @Tristan and that's one of the things that I've messed with to no end. – Mar 14 '14 at 07:55

Full viewport width

2 Answers2