Skip to content
OverviewSolutions
26
Comments
8
P
Gümrah Sindar
@gumrahsindar

All comments

  • cocotiwak•120
    @cocotiwakSubmitted 11 months ago

    First time using grid. Little bit confusing, especially when combine with Tailwind. But there's always first time for everything :)

    And, still struggle to understand how to create the mobile drop-down list.

    But, yeah, this is my solution right now. Any feedback Guys ? thanks in advanced.

    News Homepage

    1
    Gümrah Sindar•490
    @gumrahsindarPosted 11 months ago

    Hi 👋 A short time ago, I'd completed this challenge too with Tailwind CSS. I suggest that you should compare your solution with mine. It will be very useful. (If you don't know React, you can use browser dev tool). Happy coding 👊

    0
  • Gümrah Sindar•490
    @gumrahsindarPosted 11 months ago

    Hi there 👋 Users should be able to switch the button when they click outside the circle. You should consider fixing that.

    Marked as helpful
    1
  • Gümrah Sindar•490
    @gumrahsindarPosted over 1 year ago

    The decision is completely up to you, but the main convention is to use <header> <main> and <footer> (if any). After that, you can organize your main area with different <section>, <article> or <aside> tags. It both effects accessibility and SEO. Also I recommend to read this: Document and website structure

    Marked as helpful
    1
  • Gümrah Sindar•490
    @gumrahsindarPosted over 1 year ago

    Hi there 👋 You can use two sections. One for hero f.e. <section id='hero'> and one for cards f.e. <section id='cards'>

    1
  • Gümrah Sindar•490
    @gumrahsindarPosted over 1 year ago

    Hi there 👋 To fix background image problem, both mobile and desktop version you can do these:

    • Add to body background-size: contain;
    • Add to @media body background-size: cover; and height: 100vh;

    After that, you will see that bg image issue fixed. 👊

    Marked as helpful
    0
  • Gümrah Sindar•490
    @gumrahsindarPosted over 1 year ago

    Hi 👋

    • You should remove background-color property from main and add it to body. Thus, you can fill the light gray color to the whole page.
    • You should add margin: 5rem auto to body selector to ensure desired result.
    • You should use grid or flexbox for smooth responsiveness instead of relative/absolute etc. (my suggestion is Grid, btw.)

    Apart from these, it's looking good. Well done 👊

    Marked as helpful
    0
  • Gümrah Sindar•490
    @gumrahsindarPosted over 1 year ago

    Hi 👋

    Here are my suggestions:

    • To fix the over-extended bottom white area, you should remove the height: 100vh property from the CSS selector of the body element.

    • Consider using rem instead of % for margin and padding declarations.

    Apart from these, it's looking good. Keep working. :)

    Marked as helpful
    1
  • Gümrah Sindar•490
    @gumrahsindarPosted over 1 year ago

    Hi Hugo 🙋‍♂️. Firstly, congrats for your first challenge like me. I have a few little suggestions regarding appearance:

    • You can increase width of main card container. Yours is a little narrower than the original one.
    • You can decrease the padding between image and main container. There is noticeably more space between them.
    • You can add much padding-bottom to <p> tag.

    Thats all, happy coding 👋

    1