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
b1mind
b1mind•2y ago
As well as me refusing to properly learn GRID even though this layout seems perfect for it.
Use Grid
Dovah
Dovah•2y ago
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
b1mind
b1mind•2y ago
I'll give it a look
Jochem
Jochem•2y ago
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
Dovah
Dovah•2y ago
I do mean that. xD
Jochem
Jochem•2y ago
as in, you make the window smaller and it flows from one to the other?
Dovah
Dovah•2y ago
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?
b1mind
b1mind•2y ago
Yea that would be your assets
Jochem
Jochem•2y ago
This looks fine to me?
b1mind
b1mind•2y ago
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
Dovah
Dovah•2y ago
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...
Dovah
Dovah•2y ago
Dovah
Dovah•2y ago
this for example Images are just ugly
Jochem
Jochem•2y ago
I'm not a designer, but I don't see anything wrong with that >_>
Dovah
Dovah•2y ago
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?
Jochem
Jochem•2y ago
yeah
Dovah
Dovah•2y ago
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
b1mind
b1mind•2y ago
FEM requirements are bs... make your own rules Like min Mobile should be 320px most popular is 360px
Dovah
Dovah•2y ago
@b1mind I do usually targer 320px
b1mind
b1mind•2y ago
They do all their designs down to 375px and drives me nuts
Dovah
Dovah•2y ago
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
b1mind
b1mind•2y ago
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 too
Dovah
Dovah•2y ago
Roger! Thanks for words of encouragement! Will look into it! Thanks! 🙂
Want results from more Discord servers?
Add your server