Skip to content
OverviewSolutions
17
Comments
2
Okkie14
@Okkie14

All comments

  • Okkie14•330
    @Okkie14Posted over 1 year ago

    Hi @rshiva

    First of all, well done with your solution

    With regards to your code not working on 600px Your CSS code reads as follows: @media (min-width: 600px) Change it to: @media screen and (min-width: 600px) and it will work perfectly

    Take care and happy coding

    Marked as helpful
    1
  • Okkie14•330
    @Okkie14Posted over 1 year ago

    @Abanoub-Ashraf1 You did an amazing job here, looking through your code I saw a few things that were pointed out to me as well

    1. Don't use a h6 tag before an h2 tag(I made the same mistake here), in the css just style the different tag to get them bigger or smaller.
    2. On font sizes px are fixed, making your website more responsive I would recommend rem, you can read more on rem here: https://developer.mozilla.org/en-US/docs/Web/CSS/rem
    3. Just have a look the mobile img is different to the desktop img using the <picture> element can solve this read here to see how to use it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
    4. Lastly your media query isn't stacking the content but rather keeping the box. I would recommend having a look at that, on tablet devices (not part of the assignment I know) it gives side scrolling just something to look at as an additional challenge.

    Hope this helps :-)

    1