Question 255204 in CSS Question posted in
Some basic documentation can be found here.

CSS Flex – desktop fine – mobile too much white space?

Hej everybody,

Just got into websites coding after not doing it for 15 years and catching up with new technology.

Flex seems great for what i want / need and on desktop browsers it displays my design exactly how i want it to be.
But on mobile (either real mobile, or simulated on desktop) there is about 4 times whitespace underneath the actual flex div container. And I have no idea where it comes from.

Here you can see the html Document:
http://nick.jaussi.eu/web2023/
how it should look, and looks like on desktop
how it looks like on simulated mobile

Relevant Code:

@charset "UTF-8";
/* CSS Document */
*, :after, :before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
}
.flex-story {
  display: flex;
  height: 100vh;
  flex-direction: row;
}
.flex-image, .flex-description {
  height: 80vh;
  width: auto;
  margin: 6vh 6vw 14vh;
  line-height: 0;
}

.flex-image img {
  height: 100%;
  width: auto;
}
<html>
<head>

<link rel="stylesheet" type="text/css" media="all" href="inc/style2023.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    
<div class="flex-story">
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-01.jpg"></div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-02.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-03.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-04.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-05.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-06.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-07.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-08.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-09.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-10.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-11.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-12.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-13.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-14.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-15.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-16.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-17.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-19.jpg"> </div>
  <div class="flex-image"><img src="http://nick.jaussi.eu/web2023/images/story-img-20.jpg"> </div>
</div>
</body>
</html>

Inspect website and trying to figure out which container is larger that the viewpoint of the website. Did not find any. Check again on flex container on w3schools.com, added meta viewpoint to head:
<meta name="viewport" content="width=device-width, initial-scale=1">

Actually not sure what to google for to understand my problem, so Thanks for any advice or help!

Tags:

2

Answers


  1. 0

    Please check your padding | margin or your Div size.

    Ich kann nicht alle Ihre Codes ansehen, deshalb kann ich nicht sehr gut Ihnen antworten!
    Bitte schreiben Sie alle Ihre HTML und CSS Codes

    Login or Signup to reply.
  2. 0

    you can use media queries to edit your paddings and margins based on the width of the device.

    you can put this in your css

    @media (max-width: 600px) {.flex-story {}}

    and edit the margin/padding settings for a specific maximum screen width.

    the width could be any other than 600px.

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

Back To Top
Search