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

HTML/CSS flex items not wrapping as expected

I reviewed this: Flex items not wrapping with flex-wrap: wrap applied but it didn’t seem to help.

Hi I have this site I’m just starting on, https://tomg186.sg-host.com/. Items in a flex container are wrapping as expected, but they are overlapping items below. I would expect the menu item/buy tickets area to move down to accommodate the flex items wrapping.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: antiquewhite;
}

.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  height: 15vh;
  background-color: antiquewhite;
  max-width: 1200px;
  margin: 0 auto;
}

.headerItem {
  flex-grow: 1;
  text-align: center;
  padding-top: 5vh;
}

.leftHandDate {
  /*padding-left: 30vh;*/
  padding-top: 6.5vh;
  padding-right: 5px;
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: x-large;
  color: darkred;
}

.leftHandText {
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: xxx-large;
}

.logoHeader {
  flex-grow: 1;
  padding-top: 4vh;
}

.rightHandText {
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: xxx-large;
}

.rightHandDate {
  /*padding-right: 30vh;*/
  padding-top: 6.5vh;
  padding-left: 5px;
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: x-large;
  color: darkred;
}
<header>
  <div class="header">
    <div class="leftHandDate headerItem">
      1869-1950
    </div>
    <div class="leftHandText headerItem">
      Virginia
    </div>
    <!--        logo -->
    <div>
      <img class="logoHeader" srcset="/images/logo-150w.png 150w, /images/logo-200w.png 200w, /images/logo-300w.png 300w" sizes="(max-width: 1300px) 150px,
                        (max-width: 1920px) 200px,
                        300px" src="/images/logo-300w.png" alt="v and t logo, a yellow circle with text queen of the shortlines" />

    </div>
    <div class="rightHandText headerItem">
      Truckee
    </div>
    <div class="rightHandDate headerItem">
      1974-present
    </div>
  </div>
</header>

The items in the header above the menu area are in a flexbox, but when they wrap the menu area doesn’t move down to make space.

Image of overlapping items in mobile view

Question: Is flexbox supposed to work this way? How do I get the menu area to move down? Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution in my case was to just let go of controlling the header height, I was making this mistake of setting things specifically for desktop when I should be mobile first.

    Specifically, removing the .header height: 15vh; in the CSS altogether fixed the problem.


  2. 0

    You have to use media queries if you want responsive design. I would recommend changing flex-direction: row; to flex-direction: column; as you scale down the website.

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

Back To Top
Search