How can I get divs to stack in responsive view?

  • Resolved syzygist

    (@syzygist)


    9 years, 2 months ago

    I have a page, with two columns which looks fine on a large screen, but instead of stacking vertically (i.e., right column content follows left column content when scrolling down) when viewed from a small screen like other block elements do, the columns remain side by side, and just become narrower and narrower until there are only one or two words on each line.

    I tried a column plugin (Column-Matic), defining my columns as percentages rather than fixed width, which created nice columns, but did not resolve the problem in responsive view.

    Then I tried using left floating divs, again defining the width as a percentage, but they still squeeze into the smallest screen side by side. I can see how using percentages may be contributing to this problem, but if I use fixed widths, wouldn’t that break the responsiveness? Is there any way around this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Tom

    (@edge22)

    9 years, 2 months ago

    Hi there,

    Try setting up your divs like this:

    <div class="grid-50 mobile-grid-100">
FIRST COLUMN
</div>

<div class="grid-50 mobile-grid-100">
SECOND COLUMN
</div>

    Doing that utilizes the built in grid system, which should fix this issue.

    Let me know 🙂

    Thread Starter syzygist

    (@syzygist)

    9 years, 2 months ago

    Yes! That works! Thank you so much for taking the time to look at it for me.

    Theme Author Tom

    (@edge22)

    9 years, 2 months ago

    You’re very welcome 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How can I get divs to stack in responsive view?’ is closed to new replies.