Why do my span box changes shape on mobile view

May 7, 2022

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 class="suggestion_container">
                <span class="suggestion-box">
                    <img class="sug-img" src="images/legion.png">
                    <h1 class="sug-name">Legion Network</h1>
                    <h2 class="sug-price">800,000</h2>
                </span>
                <span class="suggestion-box">
                    <img class="sug-img" src="images/holo.png">
                    <h1 class="sug-name">Holo</h1>
                    <h2 class="sug-price">800,000</h2>
                </span>
                <span class="suggestion-box">
                    <img class="sug-img" src="images/safepal.png">
                    <h1 class="sug-name">SafePal</h1>
                    <h2 class="sug-price">1,500,000</h2>
                </span>
                <span class="suggestion-box">
                    <img class="sug-img" src="images/kava.png">
                    <h1 class="sug-name">Kava</h1>
                    <h2 class="sug-price">1,500,000</h2>
                </span>
                <span class="suggestion-box">
                    <img class="sug-img" src="images/compound.png">
                    <h1 class="sug-name">Compound</h1>
                    <h2 class="sug-price">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;
}

>Solution :

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 below 150px
add flex-shrink: 0 and flex-basis: 150px to .suggestion-box which will render the items at 150px 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;
}