Question 205668 in Html Question posted in
Some basic documentation can be found here.

Html – How do I Display Two Column Flex as One Column in Responsive View?

I am working on the following site.

https://sheboyganbjj.com/instructors.php

I need the instructor photos and bios to display as one column in Responsive view.

I did adding in code from other pages in the site where the two column pages display as one in Responsive view and was unsuccessful.

Tags:

2

Answers


  1. 0

    Adding flex-wrap: wrap; in your CSS for the class .flex-container should do the trick. This allows the content to wrap on multiple lines if it can’t fit everything on one line.

    Check out the following Flexbox guide, it might be of great help: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
  2. 0 
    .container{
border:2px solid black;
display:flex;
justify-content:space-evenly;
align-items:center;
width:30%;
flex-wrap:wrap;
}
h4{
border:2px solid black;
}
    <div class="container">

<h4>Image1</h4>
<h4>Image2</h4>
<h4>Image3</h4>
<h4>Image4</h4>
<h4>Image5</h4>
<h4>Image6</h4>

</div>

    **caution : you have to change the width property according to your window size **
    or you can use grid box layout
    like

     .container{
 border:2px solid black;
 display:grid;
 grid-template-columns: 1fr 1fr;
 }
 h4{
  border:2px solid black;
  width:50%;
 }
     <div class="container">
 <h4>Image 1</h4>
  <h4>Image 2</h4> 
  <h4>Image 3</h4>
   <h4>Image 4</h4>
    <h4>Image 5</h4>
     <h4>Image 6</h4>
 </div>

    ** you can change the width of both element according to your need**

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search