0

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;
}
Aviolin
  • 15
  • 5
  • Probably could use some HTML with that CSS if possible – EGC Oct 29 '19 at 03:16
  • I added sample code for what the cards are (it's difficult to post the actual code since it's all mixed in with php...) – Aviolin Oct 29 '19 at 03:27
  • Lots of problems in HTML, PHP and CSS. Maybe you should review your page in [W3 Validator](https://validator.w3.org/nu/) and [CSS Validator](https://jigsaw.w3.org/css-validator/), and fix current syntax issues first. I believe Bootstrap framework is helpful to you. – Raptor Oct 29 '19 at 03:51
  • 1
    @Raptor I went through those and fixed the errors, and now it seems to work correctly. If you add your comment as an answer, I will mark it solved – Aviolin Oct 29 '19 at 04:38

1 Answers1

0

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.

Raptor
  • 53,206
  • 45
  • 230
  • 366