Skip to content
Submitted over 4 years ago

CSS Flexbox

Faraz Ahmad•100
@faraz343
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey People . I want some feedback .Thanks in advance

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Martin•1,150
    @ringm

    Hey Faraz! Greay job on completing this one. The site looks really good. I have some suggestions to take it a step further:

    1. Accesibility Issues: your img tags are missing the ‘alt’ attribute, which specifies an alternate text for an image, if the image cannot be displayed. Also, you are using the backslash character () for the path of the imgs. You should use the forward slash symbol (/).
    2. Layout: I think the site would look much better if you make the background img stretch the whole width and height of the viewport. Right now you’re working with fixed units which is something you almost never should do in responsive design, its making and undesirable thick white frame all around the site. I would suggest placing the background image as a background img on a wrapper div, and then change the img according to the device on CSS.
    3. Carefull with the phrase “GB Left”, it has the wrong typography.
    4. You could get a much precise layout if you use flexbox for the general layout as well as the individual components. Try replacing your absolute positioned elements and the floats for some flexbox directives! Let me know if you have any questions, I’m happy to help! I leave you my solution to this challenge here in case you want to take a look at the code for some ideas.

    Happy coding!

  • Faraz Ahmad•100
    @faraz343

    Thanks for your help .

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