Mobile first, compatible tablet & Desktop

Community feedback

• 

  KT•390

  @KtGitItPosted over 3 years ago

  Hello Mallory 👋🏼,

  You did the great job on this. It looks good on various screen sizes. I will try to answer some of your issues.

  1. To make "main" div center, you need to give main container some kind of width. I would give max-width 1200px or something around that range and then change margin: 8-9rem auto and that should work. Play with it in dev tool in your browser!!

  2. Remove the min-width from card div and that will make it better.

  3)Once you have width(max-width) on your container then content box will adjust to it. I hope that is what you asking.

  Your code is easy to read but I would be caution using h2 before h1 for semantic reasons.You can do more research on semantic html and find out more about it.

  Best regards and keep coding, KT

  1

  ---

  

  Mallory•120

  @azerroth11Posted over 3 years ago

  @KtGitIt Hi there, thanks for your feedback !

  I did as suggested and it helped but when it comes to my boxes becoming wider, removing the min-width and setting a max width seem to make the matter worse !

  Regarding the h2 & h1, would it be better to use a h1 first, lower its font size and then h2, increasing its font size rather than h2 then h1 ?

  Thanks in advance !

  0

  

  KT•390

  @KtGitItPosted over 3 years ago

  @azerroth11 You are correct about h1 & h2. You can always change font sizes when you style them. [Check out this article] (https://webaim.org/techniques/semanticstructure/)

  Regarding your cards just remove the min-width and don't add any width at all. I misunderstood you question-3. when you said container and content, i thought you were asking about the main-container. 😂 my bad. I believe cards will adjust according to it contents. When I did this challenge, I didn't add any widths to those cards as well.

  1