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

Html – CSS.Is is posible to place one element at center of flexbox and one at the right side (large screen) ; but both at center in column in mobile devices?

CSS question.Is is posible to place one element at the center of flexbox and one at the right side (for large large screens) ; but both at center in column in mobile devices? .To make my web app responsive.

  1. on large screen it should look like this:

on large screen it should look like this

  1. on mobile screen it should look like this:

on small mobile screen it should look like this

Thank you all . I can’t figure it out.

Tags:

2

Answers


  1. 0

    Use a media-query

    @media (max-width: 600px)

    and set

    flex-direction: column
    Login or Signup to reply.
  2. 0

    You can achieve that using flexbox. When on larger larger screens you can use flex-direction: row; on your container and using media-queries you can change the flex-direction to column. Just have in mind to adjust the pixels when you will change the direction according to your need. Hope that helps.

    .container{
  display:flex;
  justify-content:center;
  flex-direction: row;
  align-items: center;
}

.middle{
   flex:1;
   display: flex;
   justify-content: center;
}

.right {
  display: flex;
  justify-content: center;
}

@media only screen screen and (max-width: 600px) {
  .container{
       flex-direction: column
   }
}
     <div class="container">
   <div class="middle">
     <div>middle</div>
   </div>
   <div class="right">
     <div>right</div>
    </div>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search