Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 16, 2017 at 2:57 pm #793966
    DonPaul93

    Hi there,
    I tried to modifiy my website by inserting the following code in the Quick CSS:

    @media all and (min-width: 960px) {
    h1{
        font-size: 50px;
    }
}
 
@media all and (max-width: 959px) and (min-width: 600px) {
    h1{
        font-size: 40px;
    }
}
 
@media all and (max-width: 599px) and (min-width: 320px) {
    h1{
        font-size: 30px;
    } 
}

    I want to specifiy all the different headlines to have a specific size…but even this simple modification didn’t work out. On desktop yes, the size was modified – but on all mobile divices I’ve tried there was no change whatsoever… Do I have to get this in the custom.css file? But it should work via Quick CSS as well, right? Or have I missed some simple thing?

    Thanks Paul

    May 16, 2017 at 3:46 pm #794032
    Jordan Shannon

    Hey DonPaul93,

    Try the following instead

    @media only screen and

    Let me know if this works.

    Best regards,
    Jordan Shannon

    May 17, 2017 at 9:16 am #794716
    DonPaul93

    Hi Jordan,

    Thanks for trying to help me. I changed the code according to your instructions – but it’s still just working for desktop.
    No changes on mobile devices..

    Best regards,
    Paul

    May 17, 2017 at 10:03 am #794726
    Sarah

    Hi,

    Can you try using the !important rule? 

     h1{
        font-size: 30px !important;
    }

    Best regards,
    Sarah

    May 17, 2017 at 10:23 am #794737
    tjswarbs78

    Hey,

    I’d imagine the media queries are confusing each other.

    Try the following…

        h1{
        font-size: 50px;
}
/*This will set the h1 size to 50px as a standard. So desktop, mobile and tablet. It will be over-ridden by the media queries below.*/
 @media only screen and (max-width: 959px){
    h1{
        font-size: 40px;
    }
}
/*This will set the h1 size to 40px when the device width shrinks to less than or equal to 959px.*/
 @media only screen and (max-width: 320px) {
    h1{
        font-size: 30px;
    } 
}
/*This will set the h1 size to 30px when the device width shrinks to less than or equal to 320px.*/

    Hope that helps

    TJ

    • This reply was modified 7 years, 6 months ago by tjswarbs78.
    May 17, 2017 at 11:09 am #794777
    Sarah

    Hi,

    Thanks for your input, @tjswarbs78!

    Paul, let us know if you still need help.

    Best regards,
    Sarah

    May 17, 2017 at 9:38 pm #795098
    DonPaul93

    Hi,

    First of all, thank you for helping me and giving me new input.

    Secondly: either way it did not work. Maybe I have missed the simplest thing. But even after I have put in the complete new code – no changes at all. Desktop reacts perfectly but not the mobile devices… I have absolutely no idea what’s going wrong – the code should be right.

    Best regards,
    Paul

    May 17, 2017 at 10:42 pm #795133
    Jordan Shannon

    Hi,

    Please try adding the following to header.php before the closing body tag and test again:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Best regards,
    Jordan Shannon

    May 19, 2017 at 11:18 am #796486
    DonPaul93

    Hi Jordan,

    There is was already this code in the header: 

    <!-- mobile setting -->
<?php

if( strpos($responsive, 'responsive') !== false ) echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
?>

    But even after adding your code it did not work.

    I’ve tried to add it in a different way as well. Via the following code to the functions.php but no result again.

    add_action('wp_head', function(){?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php })

    Am I missing something basic why all of this is not working at all?

    Best regards,
    Paul

    May 19, 2017 at 1:17 pm #796561
    Rikard

    Hi Paul,

    Please try something like this instead:

    function paul_add_meta_data_header(){ ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php }
add_action('wp_head', 'paul_add_meta_data_header');

    Best regards,
    Rikard

    May 23, 2017 at 2:47 pm #798288
    DonPaul93

    Hi Rikard,

    THANK YOU SO MUCH – it finally worked! I have no idea why the other attempts did not but it’s good now.

    Thanks to all of you who tried to help me! I was truly devastated!

    Best regards,
    Paul

    May 23, 2017 at 3:04 pm #798301
    Sarah

    Hi,

    We’re glad that the problem is fixed now. :D If you have any other questions or issues, feel free to post them here on the forum and we will gladly try to help you.

    By the way, we’d appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

    Thank you for using Enfold!

    Sarah

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Media Querries via Quick CSS not working’ is closed to new replies.