html – Why is my CSS block display not working on iPhone?

[ad_1]

I’m working on a portfolio website for myself (I’m a bit new to making webpages), and I’m trying to list my projects through cards. I have each project card as a table data element all in a table row, and I have the CSS display property for the table set to block on screens less than 1024px wide, so that it appears vertically. However, the cards still appear horizontally and go off the screen with overflow. But this only happens on iPhone (my friend with an Android phone saw the intended table, my iPhone friends had the same issue). It also works as intended in the Chrome developer tools when I test different screen sizes. Why is this happening only on iPhone, and is there a better way I can do this?

This is how it’s supposed to look on mobile devices (works on Android)

This is how it looks on my iPhone (as well as others’ iPhones)

Below is the HTML for the div that I have the table and all the project cards in (I’m also using classes from the Bulma CSS library, not sure if that has anything to do with this issue)

      <h1 id="text" class="title is-2">Projects</h1>
      <table>
        <tr>
          <td>
            <div class="card">
              <header class="card-header">
                <p class="card-header-title is-centered" id="text">
                  Project 1
                </p>
              </header>
              <div class="card-content" id="text">
                Project 1 description
              </div>
              <footer class="card-footer">
                <a
                  href="#"
                  target="_blank"
                  class="card-footer-item"
                  id="cardtext"
                  >See Project</a
                >
                <a
                  href="#"
                  target="_blank"
                  class="card-footer-item"
                  id="cardtext"
                  >Source Code</a
                >
              </footer>
            </div>
          </td>
          <td>
            <div class="card">
              <header class="card-header">
                <p class="card-header-title is-centered" id="text">
                  Project 2
                </p>
              </header>
              <div class="card-content" id="text">
                Project 2 description
              </div>
              <footer class="card-footer">
                <a
                  href="#"
                  target="_blank"
                  class="card-footer-item"
                  id="cardtext"
                  >Source Code</a
                >
              </footer>
            </div>
          </td>
          <td>
            <div class="card">
              <header class="card-header">
                <p class="card-header-title is-centered" id="text">
                  Project 3
                </p>
              </header>
              <div class="card-content" id="text">
                Project 3 description
              </div>
              <footer class="card-footer">
                <a
                  href="#"
                  target="_blank"
                  class="card-footer-item"
                  id="cardtext"
                  >See Project</a
                >
              </footer>
            </div>
          </td>
        </tr>
      </table>
    </div>

And this is the CSS I have for screens with smaller widths (The table properties are at the bottom of it)

@media (max-width: 1023px) {
  #titlediv {
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 40px;
  }

  #aboutmediv {
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-left: 40px;
  }

  #projectdiv {
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-left: 40px;
  }

  #contactdiv {
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 0px;
    padding-left: 40px;
  }

  #navbartext {
    color: #abd2fa;
    font-size: 110%;
    transition: 0.3s;
  }

  #navbartext:hover {
    background-color: #3d518c;
    color: #091540;
    transition: 0.3s;
  }

  #navbartext:active {
    background-color: #3d518c;
  }

  #navbartext:visited {
    background-color: #3d518c;
  }

  #text {
    color: #abd2fa;
  }

  #centeredtext {
    color: #abd2fa;
    text-align: center;
  }

  #cardtext {
    color: #abd2fa;
    transition: 0.3s;
  }

  #cardtext:hover {
    color: #3d518c;
    transition: 0.3s;
  }

  #mainbuttons {
    background-color: #091540;
    border-color: #091540;
    transition: 0.3s;
  }

  #mainbuttons:hover {
    background-color: #1b2cc1;
    border-color: #1b2cc1;
    transition: 0.3s;
  }

  .navbar {
    background-color: transparent;
  }

  #maintitle {
    font-size: 400%;
    color: #abd2fa;
  }

  #navbarstart {
    padding-left: 50px;
  }

  #navbarend {
    padding-right: 50px;
  }

  #profile {
    float: right;
    padding-right: 50px;
  }

  .card {
    background-color: #091540;
    width: 100%;
  }

  #profile {
    float: left;
    margin: 30px 12px 3px 4px;
  }

  th,
  td {
    padding: 20px;
    display: block;
  }
}

And this is the viewport I have set just in case it’s needed

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Am I just not doing this right or is there something I’m missing?

[ad_2]

Source link

Leave a Reply

Your email address will not be published.