iPhone 8 Media Query not working?

HTML-CSS
1

I am using Firefox DevTools to make my portfolio website responsive and when I choose the “iPhone 6/7/8 iOS 11” option, everything looks normal in Firefox. But when I go on my website using my iPhone 8 the “Hello” text and typing text aren’t there. Does anyone know why this would happen?

3

Does anyone know how to set specific params in CSS for the browser that you’re using on your phone? I tried this for firefox and I checked my phone again and I am still experiencing the same issues from above.

/* iPhone 6/7/8  iOS 11 AND iPhone SE 2nd gen iOS 14.6*/
@-moz-document url-prefix("https://www.nameofmywebsite.com") {
  @media (width: 375px) and (height: 667px) {
    .me {
      height: 300px;
      width: calc(300px * 1);
      transform: translateY(-70px);
    }

    #hello-word {
      bottom: 340px;
    }

    .name-section {
      transform: translateY(-340px);
    }

    .scroll {
      bottom: -30px;
    }
  }
}
4

Why are you using @document?

5

I thought the correct syntax for targeting specific Firefox-specific CSS rules is to use the @-moz-document rule. Is there a different approach you would recommend for ensuring that my website displays correctly on Firefox browsers?

6

But why? I have never seen that used anywhere and it is non-standard and shouldn’t ever be needed.

Whatever issue it is you are having on your phone, that CSS is not the solution.

7

I was looking at this:

And I also saw something on stackoverflow about using @-moz-document. Now that I know this isn’t the correct way, I will try to find out the proper way of targeting the firefox browser. Thanks for letting me know!

Do you know what I should use instead?

Also tried this, which made the text move back on the screen but the navbar is still covering most of it. It continues to look perfect in the DevTools but on my actual iPhone 8 the text moves under the navbar.

@media screen and (max-width: 375px) and (max-height: 667px) {
  .me {
    height: 300px;
    width: calc(300px * 1);
    transform: translateY(-70px);
  }

  #hello-word {
    bottom: 340px;
  }

  .name-section {
    transform: translateY(-340px);
  }

  .scroll {
    bottom: -30px;
  }
}
8

You very rarely need device/browser-specific CSS. At least not if you only target evergreen browsers. Sure there might be some edge cases here and there but that pertains to very specific issues. It almost never affects plain CSS layout.

I can’t give you any advice because I do not know what the issue is and I can’t test your code with the specific device.

10

The device mode doesn’t emulate devices, it can’t. For cross-browser/device testing you need the code to run on the actual browser/device. Most use something like BrowserStack or LambdaTest.

I see the issue with the nav in device mode. Pretty sure you want .welcome-section to be positioned relative considering it is the parent container for absolutely positioned elements. You likely have to make some adjustments when doing that, but that is how you usually position elements absolutely, in relation/relative to their parent.

1 Like
11

Thanks, never knew about this, I will check out BrowserStack

Thank you for pointing that out, I will make those adjustments now. You’re always very helpful :raised_hands:

12

I should say they are not free. Well, LambdaTest has some free time but it isn’t much, and BrowserStack (I believe) has a trial period.

For simple cross-browser testing (not device testing) you can use Playwright.

13

Thanks for the cross-browser testing link, I have set up Playwright on my VsCode. The video made it really easy to understand.

I added position: relative; to the welcome-section and removed the background-color of the navbar…added the background-color to the body instead. Thanks for the advice, the ‘Hello’ greeting is now lower than before.

Still can’t get it to match how it looks in DevTools, but I will try using the free trial on BrowserStack soon. But once the free trial is up, in the future when I want to check how my projects look on different devices, do I have to basically pay in order to know if my design is consistent across different devices? Is there any alternative way?

15

That is all the absolute positioning. It takes the elements out of normal document flow and lets elements overlap. To have elements push each other they can’t be out of flow.

You can use grid to do overlap and maybe some negative margin to get the same layout without using absolute position. But that is a fairly substantial refactor.

The basic idea

16

Thanks for the info, you’re right that would be a fairly substantial refactor. I’ll keep the background in the navbar instead. Good to know for the future though.

I tried out BrowserStack and they do have a free trial period, but it isn’t much like you said, only gives you 1 minute per device. I’m kind of confused how BrowserStack works, is the idea that they show what you’re working on true to size then while I see how it looks, I have the option to make changes to my media queries and see those changes live? If so, which plan I get?

17

The point is you can test on the actual devices and you have access to the browser dev tools. So you can debug and test on common devices.

I’m not suggesting you should pay for it, that is unless you have the resources and just want to give it a try for a bit. It seems overkill to pay for such a service unless you really need it.

18

Thanks for clarifying.

I believe it’s important to ensure a seamless user experience on my portfolio website, especially when potential employers or clients might view it on various devices. Firefox DevTools, while useful for development, do not accurately emulate the user experience on real devices as you explained. To showcase my work professionally and make it accessible to a wider audience, I’m considering tools like BrowserStack to guarantee it looks and functions well across different platforms.

I wish you didn’t have to pay to make something fully responsive across several devices/browsers, but if that’s my best option for a specific project, I’m willing to invest in BrowserStack. I’ll assess the need for it on a project-by-project basis, canceling the subscription when it’s no longer essential.

19

Well, you can’t account for all devices and most sites will have some quirks on various devices. It is handled through bug reports and may or may not get fixed depending on the device and the bug.

I think you might be overthinking/overdoing it. A super simple portfolio site with links to great projects, even just GitHub repos, is worth way more than a fancy portfolio site with links to little to nothing. Nobody really cares that much about your portfolio site, they care about the content it links to and the information you give about yourself.

Sure you can use the site as a project itself but I wouldn’t overdo it. It is up to you, but don’t spend time and resources on something that could have been used elsewhere to improve your overall knowledge. In time, you may find yourself updating the portfolio site or even abandoning it because you do not have the time for it.

TL;DR The design of a portfolio site might not be as important as you think it is. But it can be a good initial learning experience nonetheless.

1 Like
20

Yeah you’re right, I’m overthinking/overdoing it. Once I get years of experience with my first job in tech, I will most likely get rid of my portfolio website and just use the job experience on my resume to get the next job. I’m wasting too much time on this, it looks right on a laptop/desktop, that is good enough. Time to move on and build my first fullstack app. Thanks!

21

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.