Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 7, 2020 at 2:28 pm #1191116
    nolka

    Hi Guys
    Can you tell me the CSS code to use to set the font size for my MacBook Pro 13″ screen and my iPad Pro 10.5″ screen Landscape – I have tried many things but it just isn’t working for me.
    I am okay with the desktop and the iPhone and the iPad Pro Portrait – but for some reason I cannot change the sizes for the iPad Pro Landscape or the MacBook Pro 13″ screens.
    I have tried the following:
    @media only screen and (max-width: 1509px) {
    h1, h2, h3, h4, h5, h6 {
    font-size: 75% !important;
    }
    }
    @media only screen and (max-width: 1366px) {
    h1 { font-size: 75% !important;
    }
    }
    Thanks…
    Kevin.

    March 7, 2020 at 5:37 pm #1191138
    Guenni007

    you can select these devices over their device pixel ratio
    because these devices got one of 2

    You find here a good explanation: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    f.e.:

    @media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
…
}
    March 7, 2020 at 9:29 pm #1191164
    nolka

    Hi
    No – tried these but no luck – I am looking to change the percentage size for h1, h2, h3, and h4 but I tried this and it didm’t work on laptop or ipad pro 10.5″
    /* ———– Retina Screens ———– */
    @media screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 2)
    {
    h1 {font-size: 10px!important; }
    }
    /* iPad Pro 10.5″ Portrait and Landscape */
    @media only screen
    and (min-device-width: 834px)
    and (max-device-width: 1112px)
    and (-webkit-min-device-pixel-ratio: 2) {
    h1, h2, h3, h4 {font-size: 10px!important; }
    }
    @media only screen
    and (min-device-width: 1112px)
    and (max-device-width: 1112px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
    h1, h2, h3, h4 {font-size: 10px; }
    }

    March 7, 2020 at 9:40 pm #1191168
    nolka

    Okay – really strange… I tried the changes and they did not work even after I cleared the cache several times – then as I moved through three more pages on the site – the third page had the changes active! Whallaaa!! But the other pages still had not changed? Very strange. Then when I went into one of the pages and checked the styling and saved it again – then ALL the pages had the changes? Is this just a server issue or is one of my plugins having an effect on the code?
    I am a bit confused…
    Kevin.

    March 7, 2020 at 9:58 pm #1191171
    nolka

    Hi Guenni007
    I think it is the “Super Cache” plugin – I turned it off and the changes are working – brilliant!!!!!
    Thanks for your help – much appreciated. :)
    Kevin.

    March 8, 2020 at 5:36 am #1191211
    Rikard

    Hi Kevin,

    Great, I’m glad that you got things working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.