html - How to stop unordered list from moving to the next line -
i have css progress tracker @ top of shopping cart. it's div unordered list inside.
see live view here: http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/
the space between each step of progress tracker shrinks down screen size. once screen hits 768px tracker breaks onto next line, though there still room between each step shrink down further.
i want whole tracker (all items) break down onto next line eventually, how can stop happening soon? need each step shrink further before happens.
see live screencast here explaining problem: http://screencast.com/t/nngdgupeyevc
i've tried changing media queries, min/max widths, , different display values, nothing works.
had bit of @ css behind progress bar , think may have spotted issue. shrunk screen down around 767px under 768px mentioned. progress tracker fine when it's still being viewed @ 768px once goes below when drops down.
the reason because 1 of media queries sets containing div of progress bar width of 100%:
<div class="x-column x-sm x-3-4"> ... </div>
the media query proving culprit:
@media (max-width: 767px) .x-column.x-sm { float: none; width: 100%; margin-right: 0; }
this media query smaller screen sizes causing drop when 1px smaller 768px screen size because though naked eye seems though there space - technically there not because width of div full-width of viewport.
nb: would've added comment since not answering question more helping point in right direction lack required rep :)
Comments
Post a Comment