Design comparison
Solution retrospective
Another attempt at intrinsic design. I think the layout is mostly working OK but have two issues that have flummoxed me that I would welcome advice on:
- The
h1
should be white on the black background, and black otherwise. I have tried following some online tutorials usingmix-blend-mode
for this but cannot make it work. - For some reason,
object-fit
andobject-postioning
don't seem to have any impact on the map image. This is only really obvious on large screens, but again, I am a bit unsure of what I am doing wrong here.
EDIT:
- I just check how this looks on Safari - oh dear, some very storage behaviour going on in the header on the home page.
- And I realised I forgot to do the
srcset
for mobile images. That is probably my least favourite part of HTML, so I think I'm going to leave it. It's not where I wanted to focus with this one! - And having just looked at the design and my attempt, I think I need to focus a bit more on combining this approach with 'pixel pretty close' if not perfect. I am way out here.
Community feedback
- @Yasmine10Posted over 2 years ago
Hi Dave š
If you add width: 100% and min-height: 100% underneath the object-fit and object-positioning the map will fill the whole div.
Hope this helps!
Marked as helpful1@dwhensonPosted over 2 years ago@Yasmine10 thank you!! That works perfectly. I feel like I tried every combination in my scatter-gun approach to getting that right. I was working with
max-width
, which doesn't work in this case. Any reason formin-height
rather than justheight
? Both seem to work OK.0@Yasmine10Posted over 2 years ago@dwhenson Not really, they're both ok to use in this case I think.
Marked as helpful1@dwhensonPosted over 2 years ago@Yasmine10 thanks again - had a peek at some of your solutions looking very nice!!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord