Pricing Blog

Responsive design issues

  • lucvs6078-1314243354015567944

    Lucvs

    7 months 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-1314285217816510485

    yoelfdz

    7 months 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