Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #793966

    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

    #794032

    Hey DonPaul93,

    Try the following instead

    @media only screen and

    Let me know if this works.

    Best regards,
    Jordan Shannon

    #794716

    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

    #794726

    Hi,

    Can you try using the !important rule? 

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

    Best regards,
    Sarah

    #794737

    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 6 years, 10 months ago by tjswarbs78.
    #794777

    Hi,

    Thanks for your input, @tjswarbs78!

    Paul, let us know if you still need help.

    Best regards,
    Sarah

    #795098

    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

    #795133

    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

    #796486

    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

    #796561

    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

    #798288

    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

    #798301

    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

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