CSS help needed for iPhone X.

An icon on my website does not appear in the correct position on the iPhone X.

This is how it looks on the iPhone X.
https://static.livechatinc.com/8801096/P9T56S6R1W/682a85e0baac26f4f818b6d34acb376c/Screen%20shot.jpg

This is how it should look.
https://static.livechatinc.com/8801096/P9T56S6R1W/4a7d99c514e11c7caf2bfe52f12688e8/Image-1.jpg

Please help.

  • Patrick Freitas
    • Staff

    Hi Dion Kara,

    How are you?

    As I can see you need some CSS help, this is happening because iPhone x has a different screen size, we just need to update some medias queries.

    Please navigate to Wordpress dashboard -> Appearance > Customize > Additional CSS.

    Also you can download and use the simple custom css plugin:
    https://wordpress.org/plugins/simple-custom-css/

    Using these medias queries should fix your iPhone problem.

    @media only screen and (max-width: 1023px) and (min-width: 690px)
    .home-featureimg3 {
       margin-top: -180px !important;
    }
    
    @media only screen and (max-width: 689px) and (min-width: 600px)
    .home-featureimg3 {
       margin-top: -60px !important;
    }

    Let me know if those css worked as you would like.

    Have a nice day
    Best Regards,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion,

    As I can see, it didn’t work because site is getting the old CSS in the child style.css file. We could replace some rules, but remember, always do a backup before editing your CSS file.

    Please edit Salient Child style.css and find this part of code

    @media only screen and (max-width : 1023px) and (min-width : 600px){.home-featureimg3 {margin-top: -180px;}
    }
    @media only screen and (max-width : 599px) and (min-width : 100px){.home-featureimg3 {margin-top: -80px;}
    }

    Then replace with:

    @media only screen and (max-width: 1023px) and (min-width: 690px){.home-featureimg3 {margin-top: -180px !important;}
    }
    @media only screen and (max-width: 689px) and (min-width: 600px){.home-featureimg3 {margin-top: -60px !important;}
    }
    @media only screen and (max-width : 599px) and (min-width : 100px){.home-featureimg3 {margin-top: -80px;}
    }

    Then you can remove the both from your custom.css

    @media only screen and (max-width: 1023px) and (min-width: 690px)
    .home-featureimg3 {
       margin-top: -180px !important;
    }
    
    @media only screen and (max-width: 689px) and (min-width: 600px)
    .home-featureimg3 {
       margin-top: -60px !important;
    }

    Let me know the results.
    Have a nice day.
    Best Regards
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion Kara,

    How are you today?

    No problem, will need do some more improvements in the CSS, remember is important to keep your CSS save, please, always perform a backup before editing.

    The space between guitar picks can be adjusted using:

    @media only screen and (max-width: 1023px) and (min-width: 690px){.home-featureimg3 {margin-top: -180px !important;}
    }
    @media only screen and (max-width: 689px) and (min-width: 600px){.home-featureimg3 {margin-top: -90px !important;}
    }
    @media only screen and (max-width : 599px) and (min-width : 100px){.home-featureimg3 {margin-top: -80px;}
    }

    Instead

    @media only screen and (max-width: 1023px) and (min-width: 690px){.home-featureimg3 {margin-top: -180px !important;}
    }
    @media only screen and (max-width: 689px) and (min-width: 600px){.home-featureimg3 {margin-top: -60px !important;}
    }
    @media only screen and (max-width : 599px) and (min-width : 100px){.home-featureimg3 {margin-top: -80px;}
    }

    And fell free to manage the -90px if you need push down or up the guitar pick.
    Also a new workaround to the tablet view:

    @media only screen and (max-width: 1034px) and (min-width: 1000px){.home-featureimg{margin-top: -130px !important;
    }}
    @media only screen and (max-width: 1001px) and (min-width: 1000px){.home-featureimg{margin-top: -132px !important;
    }}

    Please let me know if you need to cover any screen size further
    Best Regards,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion,

    Probably some thing is missing, I made some tests here, and the custom CSS worked fine for me, I can only edit using my browser but this part is how the CSS should look like to work:

    nav { margin-top: 1px;}
     #LMTxtText21 { display:none;}
    .home-featureimg {margin-top: -130px;}
    .home-featureimg2 {margin-top: -130px;}
    .home-featureimg3 {margin-top: -130px;}
    
    @media only screen and (max-width: 1023px) and (min-width: 100px) {.home-featureimg2 {margin-top: -80px;}
    }
    @media only screen and (max-width: 1132px) and (min-width: 1024px) {.home-featureimg2 {margin-top: -130px;}
    }
    @media only screen and (max-width: 1033px) and (min-width: 400px) {.home-featureimg {margin-top: -180px;}
    }
    @media only screen and (max-width: 1023px) and (min-width: 690px){.home-featureimg3 {margin-top: -180px !important;}
    }
    @media only screen and (max-width: 689px) and (min-width: 600px){.home-featureimg3 {margin-top: -90px !important;}
    }
    @media only screen and (max-width : 599px) and (min-width : 100px){.home-featureimg3 {margin-top: -80px;}
    }
    @media only screen and (max-width: 1023px) and (min-width: 690px) {.home-featureimg3 {margin-top: -180px !important;}
    }
    @media only screen and (max-width: 689px) and (min-width: 600px) {.home-featureimg3 {margin-top: -60px !important;}
    }

    However, CSS is read top to down, you can check if any other rules are not over-ridging also you can try to cover from bigger to smaller screen and see if it does fix the problem, I like to create all the queries rules in the bottom of CSS, it will make sure that any previous CSS will not reflect in my medias queries.

    if it doesn't work let me know and I can have another closer look in your code.
    have a nice day,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion Kara

    I would suggest if you don't mind please check if this doesn't have any previous CSS rules which is conflicting with the new ones.
    This probably is what causing issue now, however if you still having issues and can not find which rules is re-writing the new ones, I can have a closer look in the CSS file and for that I'll need some FTP details:

    Note: Don't leave your login details in this ticket.

    Instead, you can send us your details using our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question:

    Subject: "Attn: Patrick Freitas"
    - Site login URL
    - WordPress admin username
    - WordPress admin password
    - FTP credentials (host/username/password)
    - cPanel credentials (host/username/password)
    - Folder path to site in question
    - Link back to this thread for reference
    - Any other relevant urls/info

    Have a great day,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion Kara

    Sorry to take too long time to replay, I had a closer look in the CSS, there were some repeated code and ; missing. I created a style-old.css on the same folder if you would like to revert any changed code.
    I covered all screen sizes and removed the repeated code using less !important on CSS, this allow you to create any modification just following the new CSS file.

    Please let me know if there any screen size that I left behind.
    Have a Great Day
    Best Regards,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion Kara

    You can follow my custom rules from style.css, I don't have the Iphone x, but I found on internet this sizes for the CSS and you can paste on bellow of file:

    @media only screen
        and (device-width : 375px)
        and (device-height : 812px)
        and (-webkit-device-pixel-ratio : 3)
         and (orientation : landscape) {
                 .mycustomcss{
                  }
         }

    You just need use your css instead .mycustomcss and this should fix, It will look something like

    @media only screen
        and (device-width : 375px)
        and (device-height : 812px)
        and (-webkit-device-pixel-ratio : 3)
         and (orientation : landscape) {
             .home-featureimg3{
                     margin-top: -180px;
              }
            .home-featureimg{
                 margin-top: -180px;
                 }
         }

    however you can send me a screenshot of the page and say how many PX to top or to bottom you want to move and I can help you out.

    Have a Great Day,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    Hi Dion Kara

    This is strange, I got a screenshot from a another WPMU DEV member and in his iPhone X the Icons are working fine:

    Would't you mind please to clean a mobile cache and see if this is not the old CSS.

    I'll keep looking for a workaround and update you when I figure this out.

    Have a Great Day
    Best Regards,
    Patrick Freitas

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.