Use rem to make HTML resize to the width of the device screen
The content overflows from the div.
To avoid that we need to provide padding on the right.
.product-row {
background-color: rgba(202, 226, 245, 0.658);
border: 1px solid black;
border-bottom-width: 3;
border-top-width: 0;
border-left-width: 0;
padding-right: 35rem;
}
And for the whole page to be responsive based on the width of the screen. Convert every px to rem.
If you want everything on the page to change its size based on the width. Then try converting font-size and widths to rems.
Check here for updated code.
Try adding max-width: 100px;, max-width: 100px;
so it does not expand or shrink but is responsive
Row content won’t change it size when window size decreased.
The problem is the style of every element – flex: 0 0 100px
Not growable (0), not shrinkable (0), and with an initial length of 100px
How can I replace this style to look the same, but will be responsive to window size decrease.
Now without the flex: 0 0 100px, it won’t be in a straight line order, and each element won’t be above next element’s row
With array.map((obj, index) => {return ( <div but I made it here with only two elements.
codesandbox – two rows
If its better to look at it in the codesandbox please tell me and I’ll delete the snippet code below.
.product-row {
background-color: rgba(202, 226, 245, 0.658);
border: 1px solid black;
border-bottom-width: 3;
border-top-width: 0;
border-left-width: 0;
}
.object-elements {
display: flex;
flex-direction: row;
}
.product-name {
box-sizing: border-box;
font-size: larger;
padding: 10px;
font-weight: 600;
flex: 0 0 210px;
}
.price {
font-size: larger;
padding: 10px;
font-weight: 600;
padding-left: 16px;
padding-right: 16px;
flex: 0 0 100px;
}
.quantity-button {
font-size: larger;
padding: 10px;
font-weight: 600;
flex: 0 0 160px;
}
.quantity {
display: inline-block;
width: 20px;
text-align: center;
}
.add-remove {
width: 3rem;
font-size: 1.5rem;
text-align: center;
text-shadow: 0 1px 0 rgba(#fff, 0.6);
cursor: pointer;
border-radius: 10px;
margin: 5px;
border-width: thin;
}
.total-price {
font-size: larger;
font-weight: 600;
padding: 10px 0px 0px 50px;
flex: 0 0 100px;
}
.product-img {
border: 1px solid black;
width: 100px;
height: 100px;
}
<div class="product-row">
<div class="object-elements">
<img src="https://image.freepik.com/free-vector/realistic-vitamin-complex-package_52683-35815.jpg" ' alt="" class="product-img" />
<div class="product-name">butterfly</div>
<div class="price"> 30$</div>
<div class="quantity-button">
<button class="add-remove">-</button>
<div class="quantity">23</div>
<button class ="add-remove">+</button>
</div>
<div class="total-price">230$</div>
</div>
</div>
In this snippet the “total price” is out of the row, not as in a full window.
If you’re wanting dynamic sizing, use percentage values instead of pixels.
@AndrewCorrigan with percentage it won’t make it equal in each row, so I tried to your advice to change to a different unit and
Anjan’s solution may be a bit better then – percentage values depend on the size of the parent elements, etc. I’d thought the issue was resizing in general – didn’t realise the issue was the background not expanding to cover the full row. Although it does occur to me that you don’t have anything with the
