CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-lists
Imas
Imas

Reputation: 177

Dynamically resize horizontal <li> elements to remain in one row

I was looking to create a 'gallery' section on a page of mine, where I can have three elements on display. The problem I'm facing is that, when resizing the window or viewing on a smaller screen, there could be overlaps or a second row may be made with one of the elements. Is there a solution to this? I was attempting to go about this using the viewport width (declaring the li element width to be something like 33vw) but this doesn't seem to work. I would still hope to have the resizing property based on 'vw' though.

Below is a JSfiddle showing what the problem is. If the element width is changed to 33vw, there is an overflow to a second row. I left it at 30vw to display what I mean by a horizontal row with evenly spaced li elements. In addition, is there a way to have these elements made smaller, say 25vw, and centered evenly, with spacing between them?

https://jsfiddle.net/1ofc4275/3/

HTML:

<div id="gallery">
  <ul>
    <li> Thing1 </li>
    <li> Thing2 </li>
    <li> Thing3 </li>
  </ul>
</div>

CSS:

#gallery ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

#gallery ul li {
  text-align: center;
  border-right: 2px solid black;
  list-style: none;
  display: inline-block;
  width: 30vw;
}

Thank you! I appreciate your answers.

Upvotes: 1

Views: 2008

Answers (1)

mdelrossi1
mdelrossi1

Reputation: 76

There are a few things going on.

For one, you are using vw units to line up the grid. These units are not relative to the container but to the viewport. The body element has some margin on it which is limiting how much space you have to lay out these list items. 100vw is actually more than the available space of the container. If you use something like percentages (relative to the container) as opposed to viewport widths (relative to the viewport), you are partially there.

Second, your HTML has line breaks between your <li> elements. When rendering, that little bit of extra white space will add do your elements' widths. There are two workarounds for this. One is to set the font size on the <ul> to 0 and the child <li> to something like 16px:

ul {
    font-size: 0;
}

    li {
        font-size: 16px;
    }

The other is to remove that white space between your LI's entirely.

<div id="gallery">
    <ul>
        <li> Thing1 </li><li> Thing2 </li><li> Thing3 </li>
    </ul>
</div>

HTML minifiers are great at preventing this problem.

Since you added some box model spacing (the border) to the child LIs, the third step you need to take is setting the box-sizing css property. The default browser value for box-sizing is content-box. This means that when you set the width of the element, it will set the width of the box's content and will add the padding, border, or margin to it. A good article on box sizing can be found over at CSS tricks. You can remove the border and it will work, or you can set boz-sizing to border-box and watch it all fall into place.

I put together a solution here for you:

#gallery ul {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0;
}

#gallery ul li {
  text-align: center;
  border-right: 2px solid black;
  list-style: none;
  display: inline-block;
  width: 33.3333%;
  font-size: 16px;
  box-sizing: border-box;
}
<div id="gallery">
  <ul>
    <li> Thing1 </li>
    <li> Thing2 </li>
    <li> Thing3 </li>
  </ul>
</div>

If you want these to be centered and spaced evenly but smaller, you can use text-align on the parent <ul> for that. Just remember to reset it on the <li>:

#gallery ul {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0;
  text-align: center;
}

#gallery ul li {
  text-align: center;
  border-right: 2px solid black;
  list-style: none;
  display: inline-block;
  width: 25%;
  font-size: 16px;
  box-sizing: border-box;
  text-align: left;
}
<div id="gallery">
  <ul>
    <li> Thing1 </li>
    <li> Thing2 </li>
    <li> Thing3 </li>
  </ul>
</div>

Upvotes: 1

Related Questions