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

Mobile first using HTML and CSS

@MatthewKissinger

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. With the desktop background image:

I was having difficulty having it only cover the bottom half of the page without repeating so I decided on having it cover the entire background starting at 380px. Any tips or hints to solve this problem would be appreciated.

Community feedback

@Nwaforkene

Posted

Bro, did you make use of a framework like bootstrap or you used on HTML & CSS??

0

@MatthewKissinger

Posted

@Nwaforkene

This was done with HTML and CSS. I've only dabbled a little bit with bootstrap in the past. I usually end up just breaking bootstrap so I try to do without it.

0

@Nwaforkene

Posted

@MatthewKissinger wow..because i've been trying to use just HTML & CSS but it doesnt come out well...seems i'll have to take a look at your code..Although i'm still gonna learn bootstrap tho.. Thanks man

0

@MatthewKissinger

Posted

@Nwaforkene

I went through this great 21day course for responsive web design from Kevin Powell. It was free and taught me a lot about using containers, widths, and media queries. It's practical and won't take you 21 days. Highly recommended.

Here's the link: https://courses.kevinpowell.co/conquering-responsive-layouts

0

@Nwaforkene

Posted

@MatthewKissinger

Alright bro... I'll take a look at it.. Thanks

0

@SahasSaurav

Posted

use background-size:contain background-repeat: no-repeat and background-position: bottom for background image

0

@MatthewKissinger

Posted

@SahasSaurav

Thank you for this! I had no idea about background-size: contain.

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