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 CSS, Flex, media queries

Viacheslavβ€’ 20

@vstrogalev

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Thank you all, guys for your comments and advices!

Community feedback

Akshay Meshramβ€’ 390

@akshay63

Posted

Hey, Viacheslav! Even if you have done some mistakes, you have done a great job in creating the site for the desktop. Don't bother much rather revise the concepts of basic layout methods using CSS and apply those to your project.

Some changes I suggest you try out: 1.To answer your first question: We have to only change the font size of the overall font in the HTML element itself only and not to both HTML and Body element. 2.To change the background-image size: set the 'background-size: cover' for the image and do not use the object-fit property for images because it is for background videos.

I also have done some changes to your code if you don't mind.

0

Viacheslavβ€’ 20

@vstrogalev

Posted

@akshay63 thank you a lot! I have deleted font-size in Body tag, and set image as background image so I deleted srcset in html that is better.

0
Akshay Meshramβ€’ 390

@akshay63

Posted

@vstrogalev Great. Now you can work on adding other Media queries for tablet (portrait/landscape) viewports. Just don't overwhelm yourself. Keep coding!πŸŽ‰

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