Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive page with flexbox and floats

@fvaldes0109


Design comparison


SolutionDesign

Solution retrospective


Feel free to leave any suggestion.

PS: This was the last Newbie Free challenge. So from now on I'll be making the Junior ones :D

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @fvaldes0109 👋🏻 it's me again 😅

I just have some suggestions for the background image and some other things.

  • I just added a couple of things to make the background image more responsive, and here's the code:
body {
    background-image: url('./images/bg-desktop.svg');
    background-color: hsl(257, 40%, 49%);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}
  • Well, I don't want to disappoint you, but using float in modern web development is discouraged. Developers used it way back, when there was no flexbox and grid to make some layouts. But building a responsive website with floats is a real pain. It's cool that you not only put the layout together, but also managed to make it responsive. However, at the end of the day, I'd still suggest practicing new technologies more, such as flexbox and grid.

I hope this was helpful 👨🏻‍💻 Congrats on finishing the last project, there are many more cool projects coming, I'm pretty sure you're going to make them as good as these. Cheers 👾

Marked as helpful

1

@fvaldes0109

Posted

@kens-visuals Hi, thanks for the advice! I ended up using float because when I tried flexbox, the image only shrank on it x-axis, messing up with its aspect ratio. I already replaced it with flexbox and fixed the issue. Seems like I only needed to wrap the img inside a div XD.

0
P
Ken 4,915

@kens-visuals

Posted

@fvaldes0109 I'm glad that you figured it out 😅

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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