CODEWITHSUNDEEP
javascripthtmlcssflexbox
Zee
Zee

Reputation: 145

How do I stop flex images from overlapping each other?

I've created an admin page using PouchDB/JS to upload content to a database so it will display on another page, but when the items are uploaded to the main page they overlap each other when the page is resized, and/or do not fall into another column despite 

flex-wrap: wrap;

being used in the container. My JS creates new entries on the main page so the code isn't exactly the same, but I've created some divs with the same image to demonstrate the problem. It looks fine when on a webpage, but this is what happens when the page is resized:

problem

This is similar to what I'm trying to achieve:

desired layout

I want all of the images to be a fixed size (one third of the container) (even if the image uploaded has different dimensions), and when the page is made smaller I want the boxes to fall below each other (so only 1 image per column on mobile devices)

Could someone take a look at my code and let me know how to solve my problem please?

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

.sortFilms {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

.filmRow img {
  min-width: 200px;
  width: 200px;
  border-radius: 20px;
}

.filmRow {
  flex-direction: column;
  text-align: center;
  width: 33%;
  padding: 10px;
}

#filmContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sorting {
  width: 20%;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  width: 50%;
  color: #AAAAAA;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}
<header>
  <img src="img/rv-logo.png">
  <p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>

<div class="sortFilms">
  <h2 id="formTitle">Browse reviews</h2>
  <p class="sorting"> Sort by:
    <label>Ascending <input type="radio" name="sort" checked/></label>
    <label>Descending <input type="radio" name="sort"/></label>
  </p>
  <div id='filmContainer'>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>

  </div>
</div>

Upvotes: 2

Views: 2095

Answers (2)

NullPoiиteя
NullPoiиteя

Reputation: 57322

try remove min-width from .filmRow img

.filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.filmRow img {
  max-width: 200px;
  width: 100%;
  margin: 10px;
  border-radius: 20px;
}

Working demo

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

.sortFilms {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

 .filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.filmRow img {
  max-width: 200px;
  width: 100%;
  margin: 10px;
  border-radius: 20px;
}

#filmContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sorting {
  width: 20%;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  width: 50%;
  color: #AAAAAA;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}
<header>
  <img src="img/rv-logo.png">
  <p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>

<div class="sortFilms">
  <h2 id="formTitle">Browse reviews</h2>
  <p class="sorting"> Sort by:
    <label>Ascending <input type="radio" name="sort" checked/></label>
    <label>Descending <input type="radio" name="sort"/></label>
  </p>
  <div id='filmContainer'>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>

  </div>
</div>

Upvotes: 1

blackcityhenry
blackcityhenry

Reputation: 727

I saw you applied padding to flex child.

The solution is simple. Apply box-sizing: border-box; to .filmRow .

The reason is that you set .filmRow's width: 33% while adding padding to it.

box-sizing: border-box; is making the whole div including padding to be width: 33%.

https://codepen.io/blackcityhenry/pen/ZwzOXa

EDIT:

And since the width is being set to 33% of the parent. Without a min-width , flex child will not wrap because 33% is always a relative unit.

Upvotes: 2

Related Questions