CODEWITHSUNDEEP
htmlcssflexboxresponsive-design
TrueChow
TrueChow

Reputation: 97

How to make items stack on mobile view

I have made 3 images side by side using display flex in desktop screen but now i want to make them responsive and make the items stack in mobile mode. Can someone tell me how to do it?

Code:

.row {
  display: flex;
}

.column {
  padding: 200px;
  text-align: center;
  flex: 10%;
}

.column img {
  border-radius: 50%;
  width: 300px;
  border: 2px solid white;
}

.column p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
}

.partners-h1 p {
  font-family: "BatmanForeverAlternate";
  font-size-adjust: 10px;
  color: white;
}

.partners-h1 {
  text-align: center;
  font-size: 30px;
}

/* added for demonstration purpose by editor */
body {
  background-color: black;
}
<div class="row">
  <div class="column">
    <img src="images/sneak.jpg">
    <p>Sneak Energy</p>
  </div>
  <div class="column">
    <img src="images/kontrol.png">
    <p>Kontrol Freek</p>
  </div>
  <div class="column">
    <img src="images/astro.jpg">
    <p>Astro Gaming</p>
  </div>
</div>

Upvotes: 1

Views: 3791

Answers (3)

Name
Name

Reputation: 1

.row {
  display: flex;
}

.column {
  padding: 200px;
  text-align: center;
  flex: 10%;
}

.column img {
  border-radius: 50%;
  width: 300px;
  border: 2px solid white;
}

.column p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
}

.partners-h1 p {
  font-family: "BatmanForeverAlternate";
  font-size-adjust: 10px;
  color: white;
}

.partners-h1 {
  text-align: center;
  font-size: 30px;
}

/* added for demonstration purpose by editor */
body {
  background-color: black;
}
<div class="row">
  <div class="column">
    <img src="images/sneak.jpg">
    <p>Sneak Energy</p>
  </div>
  <div class="column">
    <img src="images/kontrol.png">
    <p>Kontrol Freek</p>
  </div>
  <div class="column">
    <img src="images/astro.jpg">
    <p>Astro Gaming</p>
  </div>
</div>

Upvotes: 0

Chique
Chique

Reputation: 854

There are 2 ways I can think of, towards solving this.

Method 1: Using Media query

.row {
  display: flex;
  flex-direction:column; /* Initially, mobile first */
}

/* If minimum screen width is 320, switch to side by side. Replace 320 with whatever screen size you want to swap between horizontal and stacked view */
@media (min-width:320px)
{
  .row {
    flex-direction:row;
  }
}

.column {
  padding: 200px;
  text-align: center;
  flex: 10%;
}

.column img {
  border-radius: 50%;
  width: 300px;
  border: 2px solid white;
}

.column p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
}

.partners-h1 p {
  font-family: "BatmanForeverAlternate";
  font-size-adjust: 10px;
  color: white;
}

.partners-h1 {
  text-align: center;
  font-size: 30px;
}


/* added for demonstration purpose by editor */
body {
  background-color: black;
}
<div class="row">
  <div class="column">
    <img src="images/sneak.jpg">
    <p>Sneak Energy</p>
  </div>
  <div class="column">
    <img src="images/kontrol.png">
    <p>Kontrol Freek</p>
  </div>
  <div class="column">
    <img src="images/astro.jpg">
    <p>Astro Gaming</p>
  </div>
</div>

Method 2: Using flex-wrap to automatically stack when 2 images don't fit side to side

.row {
  display: flex;
  flex-wrap:wrap;
}

.column {
  padding: 200px;
  text-align: center;
  flex: 10%;
}

.column img {
  border-radius: 50%;
  width: 300px;
  border: 2px solid white;
}

.column p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
}

.partners-h1 p {
  font-family: "BatmanForeverAlternate";
  font-size-adjust: 10px;
  color: white;
}

.partners-h1 {
  text-align: center;
  font-size: 30px;
}


/* added for demonstration purpose by editor */
body {
  background-color: black;
}
<div class="row">
  <div class="column">
    <img src="images/sneak.jpg">
    <p>Sneak Energy</p>
  </div>
  <div class="column">
    <img src="images/kontrol.png">
    <p>Kontrol Freek</p>
  </div>
  <div class="column">
    <img src="images/astro.jpg">
    <p>Astro Gaming</p>
  </div>
</div>

Upvotes: 4

tacoshy
tacoshy

Reputation: 13002

Add a media query to address screens up to a certain width like:

@media only screen 
  and (max-width: 800px) { 
    selector { 
      property: value;
    } 
}

then change the flex-direction property from the default row to column:
flex-direction: column;

Reference to media queries: MDN Web Docs

.row {
  display: flex;
}

@media only screen
  and (max-width: 800px) {
    .row {
      flex-direction: column;
    }
}

.column {
  padding: 200px;
  text-align: center;
  flex: 10%;
}

.column img {
  border-radius: 50%;
  width: 300px;
  border: 2px solid white;
}

.column p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
}

.partners-h1 p {
  font-family: "BatmanForeverAlternate";
  font-size-adjust: 10px;
  color: white;
}

.partners-h1 {
  text-align: center;
  font-size: 30px;
}

/* added for demonstration purpose by editor */
body {
  background-color: black;
}
<div class="row">
  <div class="column">
    <img src="images/sneak.jpg">
    <p>Sneak Energy</p>
  </div>
  <div class="column">
    <img src="images/kontrol.png">
    <p>Kontrol Freek</p>
  </div>
  <div class="column">
    <img src="images/astro.jpg">
    <p>Astro Gaming</p>
  </div>
</div>

Upvotes: 0

Related Questions