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

HTML flexbox going off the screen when minimised

I am currently developing a website and I am trying to make it responsive when the screen is minimised. When I try to minimise the screen the blocks are going towards the right side of the screen rather than shrinking.

I tried using flex-wrap: wrap and flex-shrink:0; and also setting the width and height to auto which didnt work

Tags:

2

Answers


  1. 0

    Setting flex or flex-wrap on everything is generally the wrong approach in these cases. The best thing is to get rid of as much CSS as you can, start small and work your way up (see Codepen link below). Most of the times you don’t need as much HTML wrappers and stuff as you think either.

    If you really need all that CSS in your project more analysis is needed to figure out why your layout isn’t working.

    Here is a working, responsive example with both flex and grid approaches:
    https://codepen.io/Flerox/pen/ExOLmRL

    Login or Signup to reply.
  2. 0

    In your code, you have the footer set to: width: 1280px;
    This means that any values inside the footer will take up 1280px of space, so set this to max-width: 100%;

    You also have certain elements in your page set to specific px too.
    With the elements inside set to specific px, including the gaps, you should consider rethinking how many pixels these will take up, as you will see the page still overflows when using a max-width on the footer.

    My recommendation is to learn Media queries, rem, em and % to make pages responsive, flexbox wrap and flexbox shrink is a great help but that isn’t how you usually get responsive designs.

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

Back To Top
Search