CODEWITHSUNDEEP
htmlcssflexbox
Shamusvw
Shamusvw

Reputation: 45

Landscape to portrait makes 1 row of 4 images go to 4 rows of 1 image

I am using Flex, wanting to position 4 images across one row on my phone. When in portrait, it loads the images one below the other. The images aren't big (I can even make them tiny!), and even in portrait they should easily fit across the screen. However when I go to landscape, then they load in one row as required.

This is what I have currently:

    <div class="flex-container">
        <div><img class="item" src="/images/personnel/person1.jpg" alt="pic1" style="width:auto;height:70px;"></div>
        <div><img class="item" src="/images/personnel/person2.jpg" alt="pic2" style="width:auto;height:70px;"></div>
        <div><img class="item" src="/images/personnel/person3.jpg" alt="pic3" style="width:auto;height:70px;"></div>
        <div><img class="item" src="/images/personnel/person4.jpg" alt="pic4" style="width:auto;height:70px;"></div>
    </div>

and in my CSS file:

  .flex-container {
    display: flex;
    background-color: rgb(220, 235, 250);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    padding: 5px;
  }

To clarify, I want them in one row in portrait AND landscape.

I also have this in my CSS file, but I'm not sure if this is the reason for the behaviour because I have tried making flex-direction row, and it makes no difference.

  @media (max-width: 800px) {
    .flex-container {
      flex-direction: column;
    }
  }

Upvotes: 1

Views: 203

Answers (2)

Shamusvw
Shamusvw

Reputation: 45

Thanks for the recommendation. So what I did is not change anything except the @media section, I made it @media (max-width: 320px) and that seemed to work! I'm still stumbling my way around, so I'm sure there is loads wrong with how I did it, but my goal is to do a little Udemy course and then come back and improve it.

Upvotes: 0

norcal johnny
norcal johnny

Reputation: 2115

How does this work for you

.flex-container {
overflow-x: scroll;
overflow-y: hidden;    
display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flexbox; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
} 

.item {
display: flex;
flex-direction: column;
padding: 0px;
margin: 5px;
}
   <div class="flex-container">
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic1" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/70x70" alt="pic2" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/150x70" alt="pic3" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic4" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic5" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/70x70" alt="pic6" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/150x70" alt="pic7" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic8" style="width:auto;height:70px;"></div>
    </div>

Upvotes: 1

Related Questions