Responsive design issues

  • Lucvs

    1 month ago

    Hey guys,

    I'm currently trying to make my web app fully responsive, and while doing that I've come accross a challenge that is probably very simple to solve, but for some reason I can't figure it out.

    When I try and set flex wrap for a div that has 2 divs inside, that are supposed to be on a straight line on desktop, and then wrap when viewed on mobile, it instantly wraps while on desktop.

    What could I be doing wrong here?

    All widths are defined in % apart from the main container of the component.
  • yoelfdz

    1 month ago

    If the sum of the % width of both divs is 100%, take into account that if you have a gap set, the total width will exceed 100% and wrap

    You should be able to:
    .wrapper_div: flex 1, horizonrtal, wrap
    .div1: flex 1
    .div2: flex 1

    No % needed

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.