CODEWITHSUNDEEP
htmlcss
TinyTiger
TinyTiger

Reputation: 2111

How to stop unordered list from moving to the next line

I have a CSS progress tracker at the top of my shopping cart. It's a div with an unordered list inside.

See live view here: http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/

The space between each step of the progress tracker shrinks down with the screen size. But once the screen hits 768px the tracker breaks onto the next line, even though there is still room between each step to shrink down further.

I want the whole tracker (all items) to break down together onto the next line eventually, but how can I stop it happening so soon? I need each step to shrink together further before that happens.

See a live screencast here explaining the problem: http://screencast.com/t/nNgDguPEYevc

I've tried changing media queries, min/max widths, and different display values, but nothing works.

Upvotes: 0

Views: 321

Answers (1)

CFA Digital
CFA Digital

Reputation: 31

Had a bit of a look at your css behind your progress bar and i think i may have spotted the issue. I shrunk the screen down to around 767px so that it was just under the 768px you mentioned. The progress tracker is fine when it's still being viewed at 768px it is once it goes below that is when it actually drops down.

The reason for this is because one of your media queries sets the containing div of your progress bar to a width of 100%:

<div class="x-column x-sm x-3-4">
...
</div>

The media query that is proving the culprit:

@media (max-width: 767px)
    .x-column.x-sm {
    float: none;
    width: 100%;
    margin-right: 0;
}

This media query is smaller screen sizes but is what is causing it to drop when you get even 1px smaller that the 768px screen size because even though to the naked eye it seems as though there is space - technically there is not because the width of that div is now full-width of the viewport.

NB: would've added this as a comment since it is not really answering your question more helping point you in the right direction however I lack the required rep to do so :)

Upvotes: 1

Related Questions