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

How to resize flexbox to match screen resolution? – Html

I have a problem with my flexbox (i think) for my website. The flex box actually does work but it goes way down (see pictures attached).

I found online that I have to use % instead of fixed sizes which I did and it does not seem to fix the problem. I also tried to use block methods but then it does a scroll bar but i want it to adapt to even phone screen resolutions or at least just look good when I resize my browser page, which it does not right now.

I can’t seem to find another solution as the other features do resize correctly, it’s just that that goes way too down upon resizing.

It is like this on a smaller resolution

when it should be like this

Here is my CSS code for that part :

.products_page{
    
    max-width:80%;
    min-height: 80%;
    display: flex;
    flex-wrap: wrap;
    margin-top: -41%;
    margin-left: 25%;
    padding-bottom: 2%;
   
  }

.products_page div{
  
    display:block;
    margin:1%;
    line-height: 20%;
  
  }
Tags:

3

Answers


  1. 0

    There is one way, but it takes more time and requires writing code:
    You put each 3 "div" in a separate "div" eg a div named "row",
    then:

    .products_page{
    width:80%;
    min-height: 80%;
    display: grid;
place-items: center;
    margin-top: -41%;
    margin-left: 25%;
    padding-bottom: 2%;
  }

.products_page .row{
display: flex;
justify-content: space-around;
align-items: center;
}

    And remove "margin" from ".products_page div".

    It’s done, it shows these elements as in this section.

    Now our task is to view the phone:

    @media only all and (max-width: 1000px){
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: center;
}

    I can’t guarantee that this will work 100%, but you can try!

    Login or Signup to reply.
  2. 0

    In your design, you are fitting 3 elements on each row. The best way to do it in flexbox is by going through flex: 33.33%:

    Code:

    .products_page{
    
    max-width:80%;
    min-height: 80%;
    display: flex;
    flex-wrap: wrap;
    margin-top: -41%;
    margin-left: 25%;
    padding-bottom: 2%;
   
}

.products_page div{
    flex: 33.33%;
}
    Login or Signup to reply.
  3. 0

    The usage of fixed sizes and percentages in your CSS, in my opinion, is what’s causing the problem you’ve been having.

    .products_page{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 2%;
}

.products_page div{
  flex: 0 0 calc(33.33% - 2%);
  margin: 1%;
  line-height: 20%;
}

    Try to modify your CSS as follows.

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

Back To Top
Search