How to Make a CSS Element Take The Full Screen Width

How Do You Make an Element Take The Whole Screen Width? Source: Igor Miske

Struggling to make an image or container take the full screen width 😫?

Here’s a quick tutorial on how this can be done in just four CSS lines 😄

Let’s Make a New Image 🖼️

I’ve made the following Code Pen with an image of a cute koala that will soon take up the entire horizontal length of the screen:

To start off, we’re going to need to make the image start at the very upper-most or (0,0) pixel of the screen. Therefore, we can apply the following css styles:

.image {
  position:absolute;
  top:0;
  left:0;
}

Finally, to make the image stretch the full width of the screen regardless of what device is used, we can add just one last line to the CSS class:

.image {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

If we put this altogether in our Code Pen, we can see the magic take place: