Question 372376 in Html Question posted in
Some basic documentation can be found here.

Html – Text on mobile website is not appearing correctly

Some text for a website I’m working on appears correctly using inspect element and viewing the website with the "toggle device" tool to view the mobile version on my laptop, however on my actual iphone website is not appearing as it should, and nothing I am doing is working to fix it.

#pricesTextContainer {
  background: #333;
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
  margin-top: 50px;
  #happyHour {
    color: gold;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
    padding: 0;
  }
  #discount {
    color: white;
    text-decoration: underline wavy rgb(95, 204, 255);
    text-underline-offset: 10px;
    text-decoration-thickness: 4px;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
  }
  p {
    font-size: 40px;
    margin: 0;
  }
  #reservations {
    font-size: 15px;
    font-weight: 100;
    margin-top: 10px;
  }
}
<div id="pricesTextContainer">
  <p id="happyHour">HAPPY HOUR</p>
  <p id="discount">30% OFF KARAOKE</p>
  <p>MONDAY / TUESDAY / THURSDAY: 9PM - 12AM <br> SUNDAY: ALL DAY</p>
  <p id="reservations">Reservations Recommended</p>
</div>

Here is what it should look like (looks like on desktop "mobile view"):
Here is what it should look like (looks like on desktop "mobile view"):

Here is what it looks like on my actual iphone:
Here is what it looks like on my actual iphone

Tags:

2

Answers


  1. 0

    one potential reason for this discrepancy could be the specificity of CSS selectors.

    Try it like this…

    #pricesTextContainer {
    text-align: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    margin-top: 50px;
}

#happyHour {
    color: gold;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
    padding: 0;
}

#discount {
    color: white;
    text-decoration: underline wavy rgb(95, 204, 255);
    text-underline-offset: 10px;
    text-decoration-thickness: 4px;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
}

#pricesTextContainer p {
    font-size: 40px;
    margin: 0;
}

#reservations {
    font-size: 15px;
    font-weight: 100;
    margin-top: 10px;
}
    Login or Signup to reply.
  2. 0

    The problem will be the use of nesting CSS

    While this is now standard, older versions of browsers did not support it and unless you can get your iPhone Safari, for instance, up to verion 17+ your nesting will be ignored.

    See https://caniuse.com/?search=nesting for more detail on use of ampersand.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search