0

I have tried every solution that I am aware of to get these two footer elements to display side-by-side on mobile. I have three footer widgets on a wordpress site (www.med-tac.com) and I am trying to reorder and re-align them on mobile using the @media approach for my screen size.

I am trying to get 1 and 3 on the same line and have tried adjusting the other properties to get it to work, but am now working with flexbox to try to accomplish this, but would be happy to revert to any solution that works.

I have tried the grid layout, the float left and float right approach, the flexbox approach and the display inline block approach, none of which will display the elements on the same line, even when the width is manually decreased to far less than the mobile footer width.

@media (max-width: 480px){


.secondary {
display:flex;
flex-flow: row wrap;


  }

#footer-sidebar1 {

  margin-top:-5px;
  top:5px;
  order:2;
}

 #footer-sidebar2 {

  margin-right: 20px !important;
  right: 10px;
  width:325px !important;
  bottom:25px;
  order:1;

  }

#footer-sidebar3 {

  order:3;

  }

}

I am trying to get sidebar 1 and 3 to display side-by side on the same line, but they are wrapping on top of each other.

Mordecai
  • 1,414
  • 1
  • 7
  • 20
Alan
  • 11
  • 2
  • do not use width to flex elements, use ```flex-grow:1;``` instead, or the other way is, no need to use media query and ```flex-grow:1;``` just add ```flex-wrap:wrap``` to the parent, it will automatically wraps in smaller screens or the depends on the content width, just try both. – Awsme Sandy Jan 14 '19 at 07:22

1 Answers1

0

If you want to have items 1 and 3 in the first line, you need to set the order of the item 3 to be less than the order for item 2.

For instance:

.secondary {
  display: flex;
  flex-flow: row wrap;
}

.secondary div {
  background-color: lightblue;
}

.secondary:after {
  content: "";
  order: 2;
  flex-basis: 110%;
}

#footer-sidebar1 {
  flex-basis: 48%;
  order: 3;
}

#footer-sidebar2 {
  order: 1;
  margin-right: 100px;
}

#footer-sidebar3 {
  flex-basis: 48%;
  order: 4;
  margin-left: 10px;
}
<div class="secondary">
  <div id="footer-sidebar1">sidebar 1 </div>
  <div id="footer-sidebar2">sidebar 2 </div>
  <div id="footer-sidebar3">sidebar 3 </div>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • I actually do want sidebar 2 on top, but then 1 and 3 below it on the second line. I'm just having trouble getting 1 and 3 on the same line together. – Alan Jan 14 '19 at 14:07
  • I have changed the order, and set a pseduo element to make the elements wrap to the next line. It should match your request – vals Jan 14 '19 at 14:40
  • Thanks so much for taking the time to post this answer, but the sidebar1 and sidebar3 are still on top of each other instead of side-by-side, making all three sidebars stacked on top of each other vertically. – Alan Jan 14 '19 at 16:32