{"id":1575,"date":"2018-11-11T18:38:43","date_gmt":"2018-11-11T17:38:43","guid":{"rendered":"https:\/\/sv.wordpress.org\/support\/topic\/image-header-responsiv-twentyseventeen\/"},"modified":"2018-11-14T03:47:04","modified_gmt":"2018-11-14T02:47:04","slug":"image-header-responsiv-twentyseventeen","status":"publish","type":"topic","link":"https:\/\/sv.wordpress.org\/support\/topic\/image-header-responsiv-twentyseventeen\/","title":{"rendered":"Image header, responsiv twentyseventeen"},"content":{"rendered":"<p>Hej!<\/p>\n<p>\u2022 webbutveckling p\u00e5 min egen dator MAMP<br \/>\n\u2022 Anv\u00e4nder mig av child-theme till twentyseventeen<\/p>\n<p><strong>Beskrivning av mitt problem:<\/strong><br \/>\nJag f\u00f6rs\u00f6ker ladda upp en image header i wordpress som jag vill ska bli responsiv(fungera i mobil, ipad, datal\u00e4ge). Men \u00e4ven fast jag fixar till min image header och klipper till den s\u00e5 att det \u00e4r 2000px i bredd x 1200px i h\u00f6jd som \u00e4r f\u00f6r just twentyseventeen temat. S\u00e5 visas det inte som det ska.<br \/>\nDet jag vill \u00e4r att visa hela bilden i mobill\u00e4get, inte bara en inzoomad bild.(tre hundar \u00e4r p\u00e5 bilden, den i mitten syns). <\/p>\n<p>Jag vet inte vad mer jag kan g\u00f6ra och beh\u00f6ver hj\u00e4lp. <\/p>\n<p><strong>Vad jag har gjort hittills(massor mer men skriver n\u00e5gra):<\/strong><br \/>\n\u2022 Jag har letat massor p\u00e5 google f\u00f6r en l\u00f6sning och f\u00f6rs\u00f6kt att hitta r\u00e4tt klass f\u00f6r vart jag ska n\u00e5 &#8221;image header&#8221; och vad jag vet \u00e4r det:<\/p>\n<pre><code>.twentyseventeen-front-page.has-header-image .custom-header-media{\n     height: 400px !important; \/\/ skriv in \u00f6nskad h\u00f6jd\n  \n    \n} <\/code><\/pre>\n<p>Detta var en av sakerna jag hitta som i alla fall r\u00f6rde min kod s\u00e5 det h\u00e4nde n\u00e5got men jag har fortfarande samma problem och har h\u00f6rt att <code>!important<\/code> inte \u00e4r s\u00e5 bra att anv\u00e4nda om man inte verkligen m\u00e5ste. <\/p>\n<p>\u2022 Jag f\u00f6rs\u00f6kte att \u00e4ndra om bilden i photoshop f\u00f6r att g\u00f6ra den mindre och ha vitt runtom s\u00e5 att den skulle m\u00f6jligtvis se b\u00e4ttre ut, utan resultat.<\/p>\n<p>\u2022  Jag l\u00e4ste p\u00e5 en l\u00e4nk jag hittat p\u00e5 google att twentyseventeen hade sv\u00e5rt med fokuserade image header bilder och sj\u00e4lva temat funkade b\u00e4ttre responsivt om det var en dekorerad image header ist\u00e4llet? Dock vill jag ha en image header som \u00e4r p\u00e5 just mina tre hundar, s\u00e5 hur ska jag g\u00e5 tillv\u00e4ga?<\/p>\n<p>\u2022 P\u00e5 en annan l\u00e4nk p\u00e5 google var det om en funktion som hette <strong>wp_is_mobile()<\/strong>: <\/p>\n<pre><code>if(wp_is_mobile()){\n  \/\/show image\n}\nelse{\n \/\/ show video\n}<\/code><\/pre>\n<p>och styla med:<\/p>\n<pre><code>.wp-custom-header iframe,\n.wp-custom-header img,\n.wp-custom-header video {\n    display: block;\n    height: auto;\n    width: 100%;\n        height: 400px;\n}<\/code><\/pre>\n<p>men jag vet inte om jag \u00e4r p\u00e5 r\u00e4tt sp\u00e5r eller om jag t\u00e4nker f\u00f6r djupt nu? <\/p>\n<p>\u2022 Har ocks\u00e5 f\u00f6rs\u00f6kte n\u00e4r jag trycker p\u00e5 Appearance -&gt; header -&gt; Add new image<br \/>\natt ta crop p\u00e5 sj\u00e4lva &#8221;image header&#8221; som jag laddat upp men de funkar fortfarande inte att visas som jag vill. <\/p>\n<p>M\u00e5nga s\u00f6kningar senare i google och fortfarande ingen l\u00f6sning och beh\u00f6ver nu r\u00e5d och hj\u00e4lp.<\/p>\n","protected":false},"template":"","class_list":["post-1575","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sv.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/1575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sv.wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/sv.wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/sv.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/1575\/revisions"}],"predecessor-version":[{"id":1576,"href":"https:\/\/sv.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/1575\/revisions\/1576"}],"wp:attachment":[{"href":"https:\/\/sv.wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=1575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}