htmlcssiphoneflexboxshrink

iPhone tries to squish everything onto one page

I've been working on a website, and all was going well until I had someone try to test it on their iPhone. All the content seems to be squished onto the screen on iPhone. This happened in Safari, Chrome, and Duck Duck Go. I am unable to recreate the problem in any of the iPhone simulators I've tried on the internet, but have seen the problem on both iPhones I've tested it on.

Here is what it looks like on the iPhone:iPhone image

Here is what it looks like on my android: Android image

The layout uses flexbox extensively, which my research leads me to believe is the problem. I have tried adding this css to the bottom of my css file to prevent flexboxes from shrinking, but it has not solved the problem:

* {
    flex-shrink: 0;
}

Let me know if you need more source code, but since the problem is throughout the entire page I would have to post all of it.

Edit: Here is the pastebin of the css https://pastebin.com/c0VjkGDc

Edit 2: Here is an example of the HTML from one of the cards that seems to be squished on iPhone (ignore the php):

<div class='container'>
<div class='results-container'>
<div class='result-card'>
  <div class='card-date'>
    <div class='month'>{$date_month}</div>
    <div class='day'>{$date_day}</div>
    <div class='year'>{$date_year}</div>
  </div>
  <div class='card-info'>
    <div class='card-title'>{$aud_position}</div>
    <div class='card-subtitle'>{$aud_name}</div>
    <div class='card-location'><i class="fas fa-map-marker-alt"></i> {$aud_location}</div>
    <div class='card-pay'><span class='pay-span'>{$aud_pay}</span></div>
    <div class='card-icons'>
      <i class='icon-red fas fa-clock'></i> App deadline passed
    </div>
  </div>
  <div class='card-actions'>
    <div class='card-fave'><i class="fas fa-heart"></i></div>
  </div>
</div>
</div>
</div>

And here is relevant CSS for that:

.container {
  display: flex;
}

.results-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.result-card {
  flex: 1;
  display: flex;
  margin-top: 5px;
  background-color: white;
  padding: 15px;
}

.card-date {
  flex: 0 0 5em;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ddd;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.day {
  font-size: 2em;
}

.card-info {
  padding-left: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
}

.card-title {
  font-weight: bold;
  font-size: 1.1em;
}

.card-pay {
  margin: 10px 0;
}

.pay-span {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #ddd;
}
* {
  flex-shrink: 0;
}
Solution

  • As mentioned in the comment of the question above, the original HTML and CSS contain quite a lot of errors. To validate and fix the errors, the following online resources can be used:

    On the other hand, if you apply the Bootstrap responsive framework in your website, it can save you quite a lot of efforts to handle different screen sizes.