responsive recipe page

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @Ruran8wa, I noticed that you used your styling within a @media query, which is causing your CSS not to be applied on certain screens.

  This is happening because you didn't define your style in the global scope but within the @media scope. In other words, if the screen size doesn't match the condition of the @media query, it won't work.

  Let's take this snippet for example:

  @media only screen and (min-width: 320px) and (max-width: 375px), Anything you put inside this @media query won't have any effect on screens smaller than 320px (which is not a problem since we use 320px as the minimum), and it won't have any effect on screens larger than 375px, which could be an issue.

  If anything I said isn't clear, please comment here, and I'll try to help as best as I can.

  Marked as helpful

  0

  ---

  

  Prince Rurangwa•30

  @Ruran8waPosted 7 months ago

  Hey @R3ygoski , thank you for pointing that out; it's something I always think about when I'm using a media query, but I haven't found the solution for it yet, what do you think I should do if I want my web to be responsive, and what do you think about the sizes I used on laptop and desktop resolution?

  your feedback is really really appreciated

  1

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @Ruran8wa, to make your project responsive, I'd recommend styling at the global scope, starting with mobile screens (320px or 375px). But note, this should be done outside of a media query.

  Then, add a media query for larger screens, typically 1024px.

  Something like this:

  body {
    /* Omitted */
  }
  /* Others selectos */
  
  @media (min-width: 1024px) {
      /* here the effects to be applied in bigger screens. */
  }
  

  Regarding the sizes you used, establishing a scope from 320-375 (mobile) and 768-1440 (desktop) is a correct approach. However, the way you did it is too specific, leaving values between 375 and 768, and values beyond 1440 without styles.

  I hope my comment wasn't confusing and answered your questions. And I thank you for your consideration. If you have any doubts, feel free to ask.

  Marked as helpful

  0