Help ironing transition from Mobile to Desktop version? (especially images!)
Project link: https://elaborate-sunflower-107ab4.netlify.app/
What was supposed to be fun little warmup project, turned into frustrating mess, due to my age old bane - images!
I'm having a lot of problems smoothening transition from mobile view to desktop version. Do I add images as <img> do I put them as "background-image" in CSS etc.
My website height is not long enough on desktop version, its glitching all over the place, all due to images.
As well as me refusing to properly learn GRID even though this layout seems perfect for it.
So, any simple advises for making this layout?
Target sizes in this project are Mobile:375px and Desktop:1440px, all in-between is up to maker.
Frontend project link: https://www.frontendmentor.io/challenges/room-homepage-BtdBY_ENq
Frontend Mentor
Frontend Mentor | Room homepage coding challenge
This small homepage challenge packs a big punch to test your layout skills. There's also a slider in there to add a JS layer for extra practice.
23 Replies
As well as me refusing to properly learn GRID even though this layout seems perfect for it.Use Grid
I actually tried, but Images are still making problem
But I guess I will try again
Do you maybe have code example for this one? Is it complicated?
I think my makup GRID version is commented in CSS if you can see it. xD
I'll give it a look
what do you mean by "smoothening transition"?
as in, when you're writing code how can you make that easier? Just making sure you don't mean "when you change the viewport size they animate between each other" or something
I do mean that. xD
as in, you make the window smaller and it flows from one to the other?
Because on some sizes it just breaks, which only happens to me in project with images since they confuse me...
@jochemm Yeah, if you click on the first link and transition from mobile(375px) to desktop, you will see it just looking attrocious due to pictures getting streched, or too zoomed in, etc on some sizes. I don't know what to do to make those images not horrid? Would that be designer job?
To provide enough image sizes irl?
Yea that would be your assets
This looks fine to me?
srcset with different images or just a better quality image. Honestly I don't see whats wrong though.
It all looks fine to me too
Oh. Well I'm still learning so I don't know if job situation is that you get enough assets, or you need to write separate media queries to make it look good. I'm not sure if I'm being lazy, not educated or just imagining things...
this for example
Images are just ugly
I'm not a designer, but I don't see anything wrong with that >_>
Well too zoomed in, images not clear, but yeah, I guess I would be able to dump it on the designer to give me proper images for 3 sizes right?
yeah
Since Frontend project only cover mobile + desktop, and I usually try to do inbetween, even tough assets are not there..
Okay then. xD I'm just overreacting
FEM requirements are bs... make your own rules
Like min Mobile should be 320px
most popular is 360px
@b1mind I do usually targer 320px
They do all their designs down to 375px and drives me nuts
And that is why I go for inbetween designs myself, but some projects are just hard to pull that off I guess, like this one...
I just have img phobia. xD
Their assets suk most the time too
I would not worry about it too much you seem to be doing well.
If you want to look into how to handle images with different quality look into doing
srcset
Its nice to learn about using webp with jpg fallbacks tooRoger! Thanks for words of encouragement!
Will look into it! Thanks! 🙂