Skip to content
Submitted over 4 years ago

Beginners Front-End Challenge with basic techniques

Peter Klink•165
@Peterklink
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

How can i make the background of the three icons on the left have the same size?

I am a little bit confused with the width of 1440 px. is it right how i did it?

And how can i make the layout of the site change according to the size of the browser window?

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hey, use max-width: 1440px, not defined width. To make icons the same - add them equal height and width, also set object-fit property to save imgs proportions. Background should be set as background-image, this way it woudn't cause any overflow problems.

    Cheers, Roman

    0
    Peter Klink•165
    @PeterklinkPosted over 4 years ago

    Thank you! object fit was the missing command. With max width it's not really working since the background picture has a width set to 1440px.

    0

Please log in to post a comment

Log in with GitHub

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