Tagged: , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 17, 2016 at 10:40 pm #615931
    chrisbelote

    Hi,

    I have added the following code to optimize the text size for mobile only, but for some reason this code is shrinking the width of the entire site when viewed on a PC. I feel like I’m missing something very easy or small. Any ideas?

    Code:

    @media only screen and (max-width: 767px) {
.toptextarea11 * {
font-size: 30px !important;
line-height: 30px !important;
}
}

@media only screen and (max-width: 767px) {
.toptextarea22 * {
font-size: 26px !important;
line-height: 26px !important;
}
}

@media only screen and (max-width: 767px) {
.toptextarea33 * {
font-size: 18px !important;
line-height: 18px !important;
}

    Thanks,
    Chris

    April 18, 2016 at 2:24 am #615961
    chrisbelote

    I had to switch back to the code below for the time being, as this does not shrink the width of the site on PC. Please advise on how I can use the original code without it shrinking the width on PC view when you can. Thanks!

    @media only screen and (max-width: 767px) {
#toptextareatop * {
font-size: 25px !important;
line-height: 25px !important;
}
}
    April 19, 2016 at 6:45 am #617126
    Rikard

    Hi Chris,

    The only thing wrong I can see in your initial code is that you are missing a curly bracket for the last section of code: 

    @media only screen and (max-width: 767px) {
.toptextarea33 * {
font-size: 18px !important;
line-height: 18px !important;
}

    Should be: 

    @media only screen and (max-width: 767px) {
.toptextarea33 * {
font-size: 18px !important;
line-height: 18px !important;
}
}

    Not sure if that is what is causing it though. You could try to minimise your code as well and put all the arguments within one media query.

    Regards,
    Rikard

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