Grid responsive

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @AndreanaPerla! I think you had to use !important because your media queries are clashing with each other. One of them is max-width: 375px (that's 0 to 375px) and the other is max-width: 1440px (that covers 0-1440px). The second one comes later in the stylesheet, so it will override style rules if they have the same specificity.

  When you change those, make sure to check how things are displayed on different screen sizes (you can do that in dev tools in your browser). Your grid layout scales down to fit the screen after that 375px breakpoint, but it makes it so small it's impossible to read. And after the second breakpoint (so wider than 1440px), some of the styles disappear and the grid changes into a column again.

  Hope this helps, if something is not clear let me know and I'll do my best to help :)

  1

  ---

  

  Andy•295

  @AndreanaPerlaPosted over 3 years ago

  Thank you so much @AgataLiberska! I completely forgot that css gives priority to the queries that comes later! I'm still a newbie TT_TT I changed the order of the media queries and now it's much better ;) thanks again

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @AndreanaPerla no worries, happy to help :)

  0