[solved] CSS grid not displaying correctly on actual mobile browsers (all displays correctly when testing mobile screens on desktop though )

1

CSS grid is not displaying correctly on actual mobile browsers (all displays correctly when testing mobile screens on desktop though). EDIT: The issue here happens only on Safari IOS.

If I open the app on a desktop’s browser and use the browser’s testing of different mobile screen sizes and types, I see that the styling works.

18
18758×1468 118 KB

However, if I click the link using my (actual) mobile phone’s browser I see that the styling does not work.
IMG_9137
IMG_9137750×1334 67.8 KB

i.e. Browser debugging is misleading. This is inconsistent and not how this should work.

What am I missing?

shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);

    }


    .key-pad {
      cursor: pointer;
      background: #33373f;
      color: #ffff;
      border-radius: 8px;
      font-size: 2.5rem;
      border-style: none;
      padding-right: 50px;
      padding-bottom: 50px;
      padding-left: 50px; */
    }

    .display {
      grid-column: 1 / span 4;
      grid-row: 1;
      color: #51aaff;
      background: none;
      height: 5rem;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
    .seven {
      grid-column: 1 / span 1;
            grid-row: 2;
    }
    .eight {
      grid-column: 2 / span 1;
            grid-row: 2;
    }
    .nine {
      grid-column: 3 / span 1;
            grid-row: 2;
    }
    .divide {
      grid-column: 4 / span 1;
      grid-row: 2;
      color: #51aaff;
      background-color: #1e242c;
    }
    .four {
      grid-column: 1 / span 1;
      grid-row: 3;
    }
    .five {
      grid-column: 2 / span 1;
      grid-row: 3;
    }
    .six {
      grid-column: 3 / span 1;
      grid-row: 3;
    }
    .multiply {
      grid-column: 4 / span 1;
      grid-row: 3;
      color: #51aaff;
      background-color: #1e242c;
    }
    .one {
      grid-column: 1 / span 1;
      grid-row: 4;
    }
    .two {
      grid-column: 2 / span 1;
      grid-row: 4;
    }
    .three {
      grid-column: 3 / span 1;
      grid-row: 4;
    }
    .subtract {
      grid-column: 4 / span 1;
      grid-row: 4;
      color: #51aaff;
      background-color: #1e242c; 
    }
    .zero {
      grid-column: 1 / span 1;
      grid-row: 5;
    }
    .decimal {
      grid-column: 2 / span 1;
      grid-row: 5;
    }
    .clear {
      grid-column: 3 / span 1;
      grid-row: 5;
      color: #51aaff;
      background-color: #1e242c;
      font-size: 2rem;
      height: 100%;
      width: 100%;  
    }
    .add {
      grid-column: 4 / span 1;
      grid-row: 5;
      color: #51aaff;
      background-color: #1e242c;
    }
    .equals {
      grid-column: 1 / span 4;
      grid-row: 6;
      color: #51aaff;
      background-color: #1e242c;
    }


    footer {
      position: fixed;
        font-size: small;
      color: #fff;
      background-color: #262626;
        display: flex;
      width: 100vw;
      height: 4rem;
      bottom: 0;
    }

    .footer-options {
            width: 50vw;
            display: flex;
            justify-content: flex-start;
        padding-inline-start: 20px;
        align-items: center;
    }


    footer span {
            width: 50vw;
            display: flex;
            justify-content: flex-end;
            padding: 0 20px;
        align-items: center;
        }

    @media (max-width: 900px)  {

        footer {
                    flex-wrap: wrap;
            height: 5rem;  
        }

        .footer-options {
            width: 100vw;
            flex-direction: row;
            justify-content: center;
        padding-inline-start: 0;
        align-items: center;
        }

        footer span {
                    width: 100vw;
                    flex-direction: column;
                text-align: center;
            align-self: flex-start;
        }
    }

Edit:

See this for the solution: [solved] Need workaround to make CSS grid work on IOS Safari

2

Hello Pat.

My best guess would be that CopePen is rendering the page for a desktop, on your phone. That being said, the devTools that come with Chrome are very powerful, and could be fixing any media-query related CSS for you.

Basically, if you resize your browser, without using the dedicated devTools you will see that the page is not responsive anyway.

Hope this helps.

3

Thanks for writing @Sky020!

The same actually happens outside Codepen (I’ve just deployed to Netlify).

Could you clarify further what you mean with “if you resize your browser, without using the dedicated devTools you will see that the page is not responsive anyway.”?

Reason is: I’ve just deployed the code on Netlify and when I resize the browser without the dedicated devTools I do not have issues with styling.

14
14990×1266 114 KB

I guess my issue with this is that I’m lacking trust on devTools to code with CSS grid. Is this common? Is there anything else I may have gotten really wrong here? Or should I simply not trust devTools and go ahead and implement some media queries?

4

Quick fix. I am running late.

@media (max-width: 380px)  {
  .clear {
    font-size: 1.2rem;
  }
  
 }

See how that works.

5

Thanks again for reverting @Sky020! I’m really kind of lost with this styling!

Sadly your suggestion didn’t fix it. See attachment.

IMG_9139
IMG_9139748×1089 50.6 KB

I’m also struggling even to fix it with any type of media queries (while still keeping it CSS grid based). Nothing seems to fix it.

I’d love to

  1. understand that discrepancy between desktop debugging of mobile screens, but also

  2. looking for suggestions for any media queries that might fix this styling - keeping it CSS grid based (because nothing I implement is fixing it).

:worried:

UPDATE:

This discrepancy only happens on IOS devices. (i.e. everything running Safari - and all rest given they are all Safari on IOS).

according to https://caniuse.com/#search=grid, IOS safari should render css grid, but I’m seemingly doing something very wrong here… Pointers welcome.

6

Sorry to see it is not working. Unfortunately, I am unable to emulate it on my laptop. It is concerning that there is a discrepancy between the debug tools and Safari.

Here is something that might help, but I cannot test it:

Note: The values “flex” and “inline-flex” requires the -webkit- prefix to work in Safari.
w3schools
w3schools display

Have a look at those, and, at least for all of your display properties, add the -webkit- prefix for Safari. Browser Support

Good luck

7

Thanks. I’ve applied all types of CSS prefixers but nothing.

For others in the future: Safari IOS does not support extrinsic sizing with grid properties such as grid-template-columns. Check known issues at: https://caniuse.com/#search=grid

I have no solution to this, nor a workaround, at this stage.

8

See my response in your other thread about the intrinsic/extrinsic sizing.

FYI. The browser can not emulate devices. For true cross browser testing you need to test on the actual devices. There are online tools (mainly commercial) that you can use as well.

1 Like