Hide sections on mobile

[chrsjensen]

How do I hide less important sections from the mobile version of the website? Also, when viewing the website on the mobile the menu and logo is crammed (see attached). How do I fix that?

[H.K. Latiyan]

You can hide the specific sections by using media query css. For example: For your burger menu and the searchicon to be aligned use this custom css:

@media (max-width: 767px){
header #trigger {
top:28px;
}}

You can adjust the 28px accordingly. For the logo use this custom css:

@media (max-width:767px){
header #logo a img {
max-width:48px;
}}

You can adjust 48px accordingly. If the css doesn't work for you, then please share the site url with us to give you specific css.

[chrsjensen]

Where and how do I paste the css?

[H.K. Latiyan]

Please go to wp-admin->appearance->customize->custom css: and copy paste the above css there and save the changes.

[Author]

Posts