{"id":10784822,"date":"2018-10-16T11:51:33","date_gmt":"2018-10-16T11:51:33","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/hide-header-image-on-mobile-devices\/"},"modified":"2019-08-05T11:22:19","modified_gmt":"2019-08-05T11:22:19","slug":"hide-header-image-on-mobile-devices","status":"closed","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/hide-header-image-on-mobile-devices\/","title":{"rendered":"Hide header image on mobile devices?"},"content":{"rendered":"<p>On mobile the header image takes up the whole screen. Therefore for mobile devices I&#8217;d like to hide the header image so readers can see my blog post title without having to scroll down.<\/p>\n<p>In Appearance &gt; Themes &gt; Edit CSS I have added this code but to no joy:<\/p>\n<p>@media only screen and (max-width: 768px) {<br \/>\n.header_bg { display: none !important; }}<\/p>\n<p>So what does the CSS need to be to hide the header image for mobiles please (making sure the menu buttons and blog post itself then move up the screen to fill the gap).<\/p>\n","protected":false},"template":"","class_list":["post-10784822","topic","type-topic","status-closed","hentry","topic-tag-header-image"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/10784822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/10784822\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=10784822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}