Need CSS help with NightLife App

#1

I started with nightlife app. http://nightlife.surge.sh/ And built the initial UI. (edited)

But it is broken. Some of the snippets are not aligning properly. How do I deal with that?

Need help with CSS.

My code is here https://github.com/yasserhussain1110/NightLifeApp

#2

How about using flexbox? You’ll have to structure your <li> like this:

<li class="bar">
  <img class="bar-image">
  <!-- You'll have to contain the text in a div. -->
  <div class="bar-info">
    <a class="bar-name">...</a>
    <a class="number-goers">...</a>
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- maybe you can just make the <p> italic with CSS rather than use an <i> -->
  </div>
</li>

.bar {
  display: flex;
}

In this screenshot I made an <li> a flex container, then wrapped the text in a <div>. I also removed any float.

image.png1366×650 116 KB

#3

That does it. Thanks.
I think I’ll need to brush up my flex box skills.

#4