How to stretch content outside the page layout

Issue

I’m trying to create this design where the content stretch left and right of the browser window.

This is what I’ve tried:

.ig-feed{
  position: relative;
  height: 664px;
  overflow: hidden;
}

.ig-feed .ig-feed__feed-container{
  height: 260px;
  position: absolute;
  left: -146px;
  right: -146px;
  display: flex;
  justify-content: space-between;
}
<div class="ig-feed">
  <div class="ig-feed__feed-container">
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
  </div>
</div>

My design takes a lot more space between the images due to justify-content: space-between;

How should I make it just take 20px between the images with stretch all the way to left and right.

My Jsfiddle

Please any help would be appreciated.

Solution

You can add margin-right and depends on your screen size you can give responsive width values for your images

.ig-feed__feed-container a {
  margin-right: 20px;
 }
.ig-feed{
  position: relative;
  height: 664px;
  overflow: hidden;
}

.ig-feed .ig-feed__feed-container{
  height: 260px;
  position: absolute;
  left: -146px;
  right: -146px;
  display: flex;
}

.ig-feed__feed-container a {
  margin-right: 20px;
 }
<div class="ig-feed">
  <div class="ig-feed__feed-container">
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
  </div>
</div>

Answered By – Evren

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.