CSS Enhancing Design with CSS Finishing Touches Applying Media Queries

I know inline-block is a short term solution, but why is my result not the same?

I am having an issue where my two columns are not aligned correctly when using the inline-block display.

Does anyone know what may be causing this? I have tried adding margin and padding to evenly distribute the two but it doesn't have any effect.

This is my result

4 Answers

Peter Vann
MOD
Peter Vann
Treehouse Moderator 35,207 Points

Hi Thomas!

I just did some testing and the issue is as I suspected.

It's because the packing list has one more item than the "Tents to Resorts" list.

(The right column is one line taller.)

Looking for a solution now, though - and I'll follow-up when I have one.

I hope that helps.

Stay safe and happy coding!

Peter Vann
MOD
Peter Vann
Treehouse Moderator 35,207 Points

Hi Thomas!

One easy/cheesy fix is to add a line break after the last list item in the first/left list.

Like this:

        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
          <br /><!-- Add this -->
        </ul>

I'll try a few other things (a CSS/style solution), but that does work.

I hope that helps.

Stay safe and happy coding!

Peter Vann
MOD
Peter Vann
Treehouse Moderator 35,207 Points

So far, because CSS is such a MESS (sometimes) and frustratingly hard to figure out (virtually impossible sometimes).

Good meme about it:

https://media0.giphy.com/media/yYSSBtDgbbRzq/giphy.gif

The HTML solution is the only way I could fix it, so far.

Peter Vann
MOD
Peter Vann
Treehouse Moderator 35,207 Points

Yo Thomas,

The only way, so far, that I could fix it with CSS (but I still had to modify the HTML), was to add a "left" class to the first/left "column" div, and then add this below .class in the media query:

  .left {
    position: relative;
    top: -30px;
  }

Which to me is a clunky fix, at best, I actually think just adding the HTML break is the best fix.

Unfortunately, I have found that often I do have to add some weird, seemingly unnecessary CSS fixes to get certain web pages to look right. Sometimes I think CSS needs a complete overhaul. Sometimes it's mystifying and infuriating at the same time. Like, have you experience "collapsing margins" - they exist and to me are ROCK STUPID!?!

More on collapsing margins:

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

I hope that helps.

Stay safe and happy coding!

Thanks so much for taking the time to try and solve this!

I had a feeling from the start that it was something to do with there being more content in the one column than the other just wasn't sure how to go about fixing it.

Upon further testing I noticed that it would only jump out of alignment once my browser window was over a certain pixel width (around 1400px), up to that point it would align perfectly.

Thanks again for your time! I really appreciate it!