Responsive Image Roadblock

HTML-CSS
1

Hey guys, I’m having difficulty with responsive image flex sizes on a site I’m creating. The media queries are overriding the original component styles even when the screen is under the min-width.

The components:

.gallery-items {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}

.gallery img {
  width: 90%;
  height: auto;
  border-radius: 8px;

The media queries are in a section at the end of my CSS:

@media only screen and (min-width: 600px) {
    .gallery img {
        width: 50%;
    }
}
@media only screen and (min-width: 900px) {
    .gallery img {
       width: 25%;
    }
}

Ideally I would like one image per row up to a min-width of 600px, 2 up to 900px, and more after 900px.
I know that elements further down take precedence, but this shouldn’t be the case if they are targeting a minimum width, right? I’m testing screen sizes with Chrome Dev tools.

Isaac.prototype (codepen.io)

2

I think your .gallery-items flex-direction needs to be row instead of column. Add flex-wrap: wrap so items can overflow into another row when necessary. The media queries on the img elements are not changing the widths of the divs that contain them. Maybe try this selector : .gallery-items>div

3

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