Search code examples
cssmobilelessscalemargin

Scale date-picker on mobile based on set margin

I need a set margin around two date-pickers. I need to scale the date-pickers horizontally according to the screen width. The dash should always be in the center of the container. I've tried solving it by using percentages, but I have no idea how to set the margins as well. Both date-pickers need to scan evenly and always be of equal size. Do anyone have an idea on how to solve this in a neat way?

Scaled by margin

Solution

  • display: flex will work for this, see fiddle https://jsfiddle.net/sxh0n7d1/5/

    Hard to tell what you are asking but here is another approach https://jsfiddle.net/sxh0n7d1/6/

    or this: https://jsfiddle.net/sxh0n7d1/7/

    Pick one, and I will explain how it was done.

    sample html

    <div class="wrapper">
  <div class="div1">

  </div>
  <div class="line">

  </div>
  <div class="div2">

  </div>
</div>

    Sample css

    .wrapper {
  width: 100%;
  height: 50px;
  border-style: dotted;
  display: flex;
  justify-content: space-between;
}
.line {
  width: calc(100% - 320px);
  border-bottom: solid;
  border-bottom-width: 1px;
  margin-bottom: 25px;
}

.div1,
.div2 {
  width: 100px;
  height: 40px;
  border-style: solid;
  border-color: red;
  margin: 0 30px;
}