Skip to content
Submitted almost 3 years ago

Responsive landing page using css in (what I thought) was ok

jackzorola•40
@jackzorola10
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm happy with the results, but would be honored to receive your opinion.

I met a few problems along the way, and have some doubts to know if that was ok.

  • I was unable to place the <footer> at the very bottom of the screen it kept going up whenever the view got more mobile, to the point of overlapping with the main elements. I did that because when I left it untouched some background appeared on it (not sure from where and made a horrible white line at the bottom of the elements, rendering my shadow-box useless).

  • I added an <a> inside the <button> to place the link to the login there, is that alright? Should it be an href inside the <button>?

  • Please (is possible) let me know if the CSS is easy to read as this is the first time I share a project with someone and I really don't know if I should be doing something else to make it easier for people to navigate my docs.

Thanks in advance!!

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! jackzorola Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> You can't use only ul you have to use li inside of ul

    -> Learn more on accessibility issues

    Keep up the good work!

    Marked as helpful
    1
    jackzorola•40
    @jackzorola10Posted almost 3 years ago

    @Crazimonk Thank you!!! I wasn't aware of the ul & li's, I'll fix that!

    1
    Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    @jackzorola10 can you mark my comment as helpful! Thank you

    0
  • Volodymyr Balashov•510
    @volod-onePosted almost 3 years ago

    Hey! Layout looks good.

    Here some things better to fix:

    • In your body tag you use "grid-column" and "grid-row". It is "grit-template-columns". For rows it is not necessary.
    • Also you can stop using "grid-template-areas". "grit-template-columns" will fix layout for you and then you can use "grid-column: span 2" for your wide element.
    • Try new "margin-inline: auto" for body tag instead "margin-left" and "margin-right"

    Good luck on your journey!

    Marked as helpful
    1
    jackzorola•40
    @jackzorola10Posted almost 3 years ago

    @DevilDoctor27 OH MY GOD!! I gotta try those, thank you so much!!

    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted almost 3 years ago

    1.Your solution looks great on mobile. So the footer should be at the end of of your HTML code but don't position it absolute or fixed. It should be text align center

    1. Wrap your codes in the body in a main semantic tag <main> also learn more about semantic tags

    3.Don't use the <a inside a button if you want a button that will navigate style the <a as a button. This will help clear the accessibility issue you are having

    Happy coding 👍

    Marked as helpful
    1
    jackzorola•40
    @jackzorola10Posted almost 3 years ago

    @Kamasah-Dickson Thank you so much for the feedback, will change it!

    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi jackzorola, great work!

    Adding main tag for Accessibility and move the grid properties into it, while in the body it uses flexbox to center the card.

    Don't forget to look at the issues report.

    Hope this help :)

    1
    jackzorola•40
    @jackzorola10Posted almost 3 years ago

    @denielden Thank you, this is a great tip, will definitely add it!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord