Apply CSS to mobile only

Comments

• Pablo

  September 2018

  Hi,

  You have to insert this CSS into media queries

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  
  

  We usually use this property.

  
  

  @media (max-width:767px){
  #idofclass{
  CSS code
  }
  }

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• IsaacSelwyn

  September 2018

  Thank you, I have inserted this: @media (max-width:767px){

  #idofclass{

  #Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 80px !important; }

  }

  }

  But it still does not change it. maybe because above I have this code: #Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 12px !important; } for desktop. How do I resolve this?

  Thank you
• Bryan

  September 2018

  Pablo have sent you an example of what the css should look like. #idofclass is just an example.

  Please sent us a link to your website and explain what exactly you would like to do.

  Make screenshots if possible.

  thanks
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• IsaacSelwyn

  September 2018

  Hi, sorry I misunderstood! First, I would like the dark blue header colour to cover the logo and menu, because as shown on this screenshot this only covers the top bit of the screen. This is because I used CSS to make the header space smaller for desktop but I need it to stay the original size for mobile. I would also like the logo to be in line with the menu icon because it is underneath it currently. This is the screenshot for that: https://imgur.com/TrvVxe8 Also, as shown on the other screenshot (https://imgur.com/RFP8hen) I would like to remove the cart icon and move the menu down (the home button etc), which I assume will happen when the header becomes the right size. Thank you very much
• Bryan

  September 2018

  You would have to remove your custom css for the header and go to theme options>global>logo. There change the height and the vertical padding of the logo. It will lower the height of the header.

  
  

  Then go to theme options>responsive>header and switch on the minimalist header option for the mobile.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• IsaacSelwyn

  September 2018

  Thank you it is fixed now