css Question posted in
Some basic documentation can be found here.

Css – I am having problems with responsive design on Iphone XR and 11

So I have this website: https://loquacious-gecko-894915.netlify.app/

Now the responsive design works perfectly well for Iphone SE and so on. However, when it comes to Iphone XR and 11 the profile pic image just expands out of nowhere and ruins everything.

Image of website with Iphone XR

This is what it normally looks like on other phones Iphone SE

This is the standard media query

@media screen and (max-width: 600px) {
    #Contact,
    footer {
      height: 40vh;
    }

    #profile {
      height: 83vh;
      margin-bottom: 0;
    }
    article {
      font-size: 1rem;
    }
    footer nav {
      height: fit-content;
      margin-bottom: 2rem;
    }
    .about-containers,
    .contact-info-upper-container,
    .btn-container {
      flex-wrap: wrap;
    }
    .contact-info-container {
      margin: 0;
    }
    .contact-info-container p,
    .nav-links li a {
      font-size: 1rem;
    }
    .experience-sub-title {
      font-size: 1.25rem;
    }
    .logo {
      font-size: 1.5rem;
    }
    .nav-links {
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;
    }
    .section__pic-container {
      width: auto;
      height: 46vw;
      justify-content: center;
    }
    .section__text__p2 {
      font-size: 1.25rem;
    }
    .title {
      font-size: 2rem;
    }
    .text-container {
      text-align: justify;
    }
  }

I also made one specifically for larger phones like Iphone 14 pro max

@media screen and (min-width: 401px) and (max-width: 430px) {
    #profile {
      height: auto;
      padding: 4rem 0;
    }
  
    .section__pic-container {
      width: 80%;
      height: auto;
      max-width: 300px;
      max-height: 300px;
    }
  
    .title {
      font-size: 2.5rem;
    }
  
    .section__text__p2 {
      font-size: 1.5rem;
    }
  
    .btn-container {
      flex-direction: row;
      justify-content: center;
      gap: 1rem;
    }
  
    .btn {
      padding: 0.8rem 1.5rem;
      font-size: 1rem;
    }
  
    .about-containers {
      gap: 1rem;
    }
  
    .contact-info-upper-container {
      flex-direction: column;
      align-items: center;
    }
  
    .contact-info-container {
      margin: 0.5rem 0;
    }
  
    footer {
      padding: 2rem 0;
    }
  }

This was my attempt at trying to fix it for the Iphone XR

@media screen and (min-width: 375px) and (max-width: 414px) {
  #profile {
    height: auto;
    padding: 2rem 0;
  }

  .section__pic-container {
    width: 50%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 1rem;
  }

  .section__pic-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
  }

  .section__text {
    text-align: center;
  }

  .title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }

  .section__text__p2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .btn-container {
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
  }

  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  #about-me {
    margin-top: 1rem;
  }
}

I just don’t quite get why the view of the Iphone XR just messes with it so much. With the other phones it looks perfectly fine but with the XR the profile pic just expands out of nowhere making it really messy.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    `@media screen and (min-width: 401px) and (max-width: 430px) {

    .section__pic-container {
  width: 80%;
  height: auto; <-- Removed this
  max-width: 300px;
  max-height: 300px;
}`

    It seems the problem was setting this height parameter in the first place. Any declaration would have made it too big so I decided to just remove the height to see what happened and it worked. Thank you for the inspiration dear commenter I appreciate it!


  2. 0

    Try this:

    .section__pic-container img {
 height: 100%;
 object-fit: contain;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search