You can see in the picture below, it displays normally on desktop, but changes on a mobile view.
I created this box with a span and added some objects in it, but I noticed, and don't know why it will show properly on PC and changes shape on Mobile even after setting the overflow-x to scroll. Someone help me with this please. See the image here.
This is the html code:
```
<div>
<div >
<span >
<img src="images/legion.png">
<h1 >Legion Network</h1>
<h2 >800,000</h2>
</span>
<span >
<img src="images/holo.png">
<h1 >Holo</h1>
<h2 >800,000</h2>
</span>
<span >
<img src="images/safepal.png">
<h1 >SafePal</h1>
<h2 >1,500,000</h2>
</span>
<span >
<img src="images/kava.png">
<h1 >Kava</h1>
<h2 >1,500,000</h2>
</span>
<span >
<img src="images/compound.png">
<h1 >Compound</h1>
<h2 >1,500,000</h2>
</span>
</div>
</div>```
This is the css style:
.sug-img {
padding: 6px 0px 0px 6px;
width: 40px;
height: 40px;
}
.sug-name {
font-size: 18px;
margin-top: 50px;
position: absolute;
left: 6px;
}
.sug-price {
font-size: 18px;
margin-top: 75px;
position: absolute;
left: 6px;
}
.suggestion-box {
position: relative;
height: 100px;
width: 152px;
background-color: white;
margin-right: 12px;
border-radius: 10px;
display: flex;
border: 1px solid;
}
.suggestion_container {
display: flex;
padding-top: 70px;
margin: -70px 20px 0px 20px;
overflow-x: scroll;
white-space: nowrap;
}
CodePudding user response:
The width
CSS attribute is overridden for items inside a display:flex
container.
You can either:
- add a
min-width: 150px
to.suggestion-box
, this will ensure that the item's width can get shrunk, but never below150px
- add
flex-shrink: 0
andflex-basis: 150px
to.suggestion-box
which will render the items at150px
to begin width, but will never shrink below that value, only grow.
Both approaches will end up with the same result.
.suggestion-box {
position: relative;
height: 100px;
flex: 1 0 150px;
background-color: white;
margin-right: 12px;
border-radius: 10px;
display: flex;
border: 1px solid;
}