Why does my SCSS look different on android devices than on IOS devices

HTML-CSS
#1

Here is my site https://zootechdrum.github.io/FaceOff_Visulals/

On IOS devices i get a nice padding on the bottom of the cards. However on android devices I get no such padding. the padding does not seem to show on chrome dev tools.

I have cleared all history and cleared the cache just to make sure that google wasn’t rendering an old version of the site. Any idea on how to combat this issue.

Here is my meta tag


        <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                <!--Interprets the markup based on the browser specified in the content tag-->
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <!--Font Awesome API-->
                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
                <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
                <link rel="stylesheet" href="css/style.css">
                <link rel="shortcut icon" type="image/png" href="img/faceIcon.png">

                <title>Face Off Visuals</title>

        </head>

here is my scss code for the card

.card {
    height: 35rem;
    background-color: $white-color;
    padding: 3rem;
    display: inline-block;

    &__heading {
        font-size:3.0rem;
        text-align:center;
        background-color: $black_color;
        color: $white-color;
    }

&__details {
    padding: 2rem;

    ul{
        list-style: none;
        width:80%;
        margin: 0 auto;
        padding: 0;

        li{
            font-weight:700;
            text-align:center;
            font-size:2.0rem;
            padding:2rem;

            &:not(:last-child) {
                border-bottom: 1px solid $black_color;
            }
        }
    }
 }
}
#2

Can you include screenshots in future posts so that we we can also see what you are talking about specifically? :smile: I’m assuming you mean the card cuts off at the end of the price.

It also displays correctly on my IOS device. I don’t have an android device. But on Chrome and FF on my PC there is no bottom padding at the bottom of the cards. Only when I remove the height: 35rem; from your .card element does the padding show. Based on screen ratio and scaling 35rem will be fine for some devices and not for other devices. It’s hard to get rem working across all devices.

A solution is that you can set the height of the card to 100% so that it scales the card based on the margin and padding of the child elements.

1 Like
#3

Thank YOU!!! It worked. i should have asked myself what was different this time than all the other apps i built in the past. rem and em gets wonky on android.

1 Like
#4