Responsive Landing Page Using CSS Flexbox

Community feedback

• 

  Edoye•170

  @DoyeDesignsPosted almost 2 years ago

  Hello Aishaskin,

  media query is a condition that has to be met before the elements on a webpage changes it’s layout structure to adjust to the user’s screen size.

  For example /Default background color / Body{ Background: white; } / On screens that are 400px or less, set background color to red/ @media only screen and (max-width: 400px){ Body{ Background: red; } } /On screens that are 800px or greater, set background color to blue/ @media only screen and (min-width: 800px){ Body{ Background: blue; } } Hope this helps

  Here is a link to better understand it https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  Also you should wrap all the work to be done in the body in a main tag.. html semantics, it make your page more accessible. So you can remove the div with the container class and use a main tag instead

  You should not put a main tag inside a div. In terms of hierarchy a main tag comes before a div tag. So a div tag should be inside a main tag not the other way around.

  To center the old price and new price add these codes in the parent element holding both of them. That is the div with the “inline” class;

  .inline{ Justify-content: center; Align-items: center; }

  Feel free to reach out to me for more clarification. Happy coding:)

  1
• 

  Amaar Chowdhury•30

  @amaarchowdhury11Posted almost 2 years ago

  Hey there!

  My attempt at this project was my first time using media queries, and I also was a bit stumped online about how to do it.

  Kevin Powell on youtube has a fantastic tutorial on doing this very FrontEndMentor challenge, and I learned from him how to do it.

  I would try and explain myself - however I'm not sure I'm the best authority on it, so I will link to his tutorial :)

  https://www.youtube.com/watch?v=B2WL6KkqhLQ&list=PL4-IK0AVhVjPregcc6pgAIerVqSWaJEM4

  I hope this helps :)

  0

  ---

  

  DayaA•100

  @AishaakinPosted almost 2 years ago

  @amaarchowdhury11 Oh thanks for your advice🙂

  0
• 

  Fritz•300

  @fritzadelbertusPosted almost 2 years ago

  Hello @Aishaakin. First of all, congratulations on finishing this challenge!

  Here are some few suggestion I can give:

  • I think w3schools explanation of media queries is easy to digest. I recommend you to start learning media query from there. You can visit their documentation here

  • I see you haven't use the <picture> tag. The <picture> tag helps you display different image source for different medias. You can see how to implement it here. It will make you easier to apply responsive images.

  I hope it's helpful and happy coding!

  0