{"id":166,"date":"2025-04-02T11:00:59","date_gmt":"2025-04-02T09:00:59","guid":{"rendered":"https:\/\/wp.als070414ps.hemsida.eu\/?p=166"},"modified":"2025-04-02T11:00:59","modified_gmt":"2025-04-02T09:00:59","slug":"media-queries","status":"publish","type":"post","link":"https:\/\/wp.als070414ps.hemsida.eu\/?p=166","title":{"rendered":"Media Queries"},"content":{"rendered":"\n<p>F\u00f6r att \u00f6va p\u00e5 media queries t\u00e4nker jag g\u00f6ra om mina tre &#8221;stora&#8221; sidor p\u00e5 min landing page. hem-sidan, moment-sidan och projekt-sidan<\/p>\n\n\n\n<p>just nu ser de ut s\u00e5h\u00e4r p\u00e5 telefon (st\u00e5ende)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"770\" src=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/image.png\" alt=\"\" class=\"wp-image-167\" style=\"width:136px;height:auto\" srcset=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/image.png 356w, https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/image-139x300.png 139w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/figure>\n\n\n\n<p>Som vi ser s\u00e5 \u00e4r navbar v\u00e4ldigt liten, bakgrundsbilden \u00e4r alldeles f\u00f6r stor och texten under \u00e4r ocks\u00e5 ganska s\u00e5 liten. Alla de tre sidorna ser ungef\u00e4r likadana ut och anv\u00e4nder samma stylesheet.<\/p>\n\n\n\n<p>H\u00e4r \u00e4r ungef\u00e4r hur jag t\u00e4nker att det ska se ut:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"232\" height=\"511\" src=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/image-4.png\" alt=\"\" class=\"wp-image-171\" srcset=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/image-4.png 232w, https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/image-4-136x300.png 136w\" sizes=\"auto, (max-width: 232px) 100vw, 232px\" \/><\/figure>\n\n\n\n<p>Efter att ha anv\u00e4nt mig utav media queries ser hemsidan likadan nu som den gjorde innan p\u00e5 dator men p\u00e5 telefon s\u00e5 fungerar den mycket b\u00e4ttre nu \u00e4n vad den gjorde innan. S\u00e5h\u00e4r ser sidan ut nu:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"339\" height=\"721\" src=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/EF620752-3354-41A0-A436-F2EA8E5193B6.png\" alt=\"\" class=\"wp-image-173\" style=\"width:190px;height:auto\" srcset=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/EF620752-3354-41A0-A436-F2EA8E5193B6.png 339w, https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/EF620752-3354-41A0-A436-F2EA8E5193B6-141x300.png 141w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/figure>\n\n\n\n<p>Inte exakt likadan som min skiss, jag ins\u00e5g att om bilden skulle ligga p\u00e5 v\u00e4nster sida s\u00e5 skulle texten bli mycket sv\u00e5rare att l\u00e4sa s\u00e5 jag la bilden ovanf\u00f6r. texten i b\u00e5de navbar och i &lt;p> elementet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"202\" src=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/B607295E-5627-4749-B4C1-26A575D9429E-1024x202.png\" alt=\"\" class=\"wp-image-174\" srcset=\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/B607295E-5627-4749-B4C1-26A575D9429E-1024x202.png 1024w, https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/B607295E-5627-4749-B4C1-26A575D9429E-300x59.png 300w, https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/B607295E-5627-4749-B4C1-26A575D9429E-768x152.png 768w, https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/04\/B607295E-5627-4749-B4C1-26A575D9429E.png 1226w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>F\u00f6r att \u00f6va p\u00e5 media queries t\u00e4nker jag g\u00f6ra om mina tre &#8221;stora&#8221; sidor p\u00e5 min landing page. hem-sidan, moment-sidan och projekt-sidan just nu ser de ut s\u00e5h\u00e4r p\u00e5 telefon (st\u00e5ende) Som vi ser s\u00e5 \u00e4r navbar v\u00e4ldigt liten, bakgrundsbilden \u00e4r alldeles f\u00f6r stor och texten under \u00e4r ocks\u00e5 ganska s\u00e5 liten. Alla de tre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-166","post","type-post","status-publish","format-standard","hentry","category-okategoriserade"],"_links":{"self":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/posts\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=166"}],"version-history":[{"count":2,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/posts\/166\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}