{"id":121,"date":"2026-02-18T10:14:03","date_gmt":"2026-02-18T10:14:03","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/?page_id=121"},"modified":"2026-02-18T11:06:23","modified_gmt":"2026-02-18T11:06:23","slug":"css","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/css\/","title":{"rendered":"Css"},"content":{"rendered":"\n<p>Some CSS that helps on mobile perhaps. This is a bit of a mess. Worked out with the help of claude.ai too quite  lot of back and forth so there are probleay a lot of things to tidy up.<\/p>\n\n\n\n<p>Hopefully this make the header image on the main page behave the same ways as the other pages and not as a hero image.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\t@media screen and (max-width: 767px) {\n\n\n\n\t\t\t.has-header-image .custom-header-media {\n\t\t\t\t\tposition: relative !important;\n\t\t\t\t\theight: auto !important;\n\t\t\t\t\tmin-height: 0 !important;\n\t\t\t}\n\n\t\t\t.has-header-image .custom-header-media img {\n\t\t\t\t\tposition: relative !important;\n\t\t\t\t\twidth: 100% !important;\n\t\t\t\t\theight: auto !important;\n\t\t\t\t\tmax-height: none !important;\n\t\t\t\t\ttransform: none !important;\n\t\t\t\t\ttop: auto !important;\n\t\t\t\t\tleft: auto !important;\n\t\t\t\t\tobject-fit: unset !important;\n\t\t\t\t\tobject-position: unset !important;\n\t\t\t}\n\n\t\t\t\/* Pull the site header back into normal flow *\/\n\t\t\t.has-header-image .site-header {\n\t\t\t\t\tposition: relative !important;\n\t\t\t\t\theight: auto !important;\n\t\t\t\t\tmin-height: 0 !important;\n\t\t\t}\n\t\t.site-title a, .site-title{\n\t\t\t\t\tcolor:black !important;\n\t\t}\n\t\t\t\/* Reposition the title\/tagline from absolute to normal flow *\/\n\t\t\t.has-header-image .site-branding {\n\n\t\t\t\t\tposition: relative !important;\n\t\t\t\t\tbottom: auto !important;\n\t\t\t\t\tleft: auto !important;\n\t\t\t\t\twidth: 100vw !important;\n\t\t\t\t\tpadding: 1em !important;\n\t\t\t}\n\n\t\t\t\/* Remove the white space the JS leaves in the page flow *\/\n\t\t\t.has-header-image .custom-header {\n\t\t\t\t\theight: auto !important;\n\t\t\t\t\tmin-height: 0 !important;\n\t\t\t\t\tposition: relative !important;\n\t\t\t}\n\t}\n\n\t @media screen and (max-width: 767px) {\n\t\t\t.has-header-image .site-header .wrap {\n\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\twidth: 100% !important;\n\t\t\t\t\tpadding: 0 !important;\n\t\t\t\t\tmargin: 0 !important;\n\t\t\t}\n\t}\n\t@media screen and (max-width: 767px) {\n\t\t\t.has-header-image .site-branding-text {\n\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\twidth: 100% !important;\n\t\t\t}\n\t}\n\n\t@media screen and (max-width: 767px) {\n\t\t\t.has-header-image .site-branding {\n\t\t\t\t\twidth: 100vw !important;\n\t\t\t\t\tanimation: resetWidth 0s forwards;\n\t\t\t}\n\n\t\t\t@keyframes resetWidth {\n\t\t\t\t\tto { width: 100vw; }\n\t\t\t}\n\t}\n\t@media screen and (max-width: 767px) {\n\t\t\t.has-header-image .site-branding {\n\t\t\t\t\tmargin-right: calc(320px - 100vw) !important;\n\t\t\t}\n\t}\n\n@media screen and (max-width: 767px) {\n    .has-header-image.twentyseventeen-front-page .site-branding,\n    .has-header-video.twentyseventeen-front-page .site-branding,\n    .has-header-image.home.blog .site-branding,\n    .has-header-video.home.blog .site-branding {\n        display: block !important;\n        height: auto !important;\n        vertical-align: unset !important;\n        width: 100% !important;\n    }\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Some CSS that helps on mobile perhaps. This is a bit of a mess. Worked out with the help of claude.ai too quite lot of back and forth so there are probleay a lot of things to tidy up. Hopefully this make the header image on the main page behave the same ways as the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Css&#8221;<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-121","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/pages\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":5,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/pages\/121\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/pages\/121\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/twentyseventeenexample\/wp-json\/wp\/v2\/media?parent=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}