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

Frontend Mentor | Advice-Generator

m1mmseen 460

@m1mmseen

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Basha 330

@Bashamega

Posted

Hello:) It looks great. I think that you should use desktop divider on the desktop version

0

m1mmseen 460

@m1mmseen

Posted

@Bashamega Thanks for yout feedback :) I'm confused, i thnk i do so:

@media (max-width: 600px) {

(...)

.divider-desktop { display: none; }

.divider-mobile { display: block; }

i only set a unusual breakpoint, because dont want to resize the svg files ;)

0
Basha 330

@Bashamega

Posted

@m1mmseen Hello:) It is not working because you used it the wrong way. You can learn the media query from w3schools from here This is an example of how you should use it

@media only screen and (max-width: 600px) {
  .divider-desktop { display: none; }

  .divider-mobile { display: block; }
}
.divider-desktop { display: block; }

.divider-mobile { display: none; }
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