Skip to content
Submitted 2 months ago

Blog Landing Page

sour413•50
@sour413
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I made the application device-responsive friendly in some devices, with help of bootstrap framework, which helps in writing less CSS, which would help me not spending much time on writing basic CSS for styling and designing basic components, where I could focus on other parts of CSS like media query and working on to make application more device-responsive friendly, Next time i want to make application more responsive and work on all devices according to the width dimension.

What challenges did you encounter, and how did you overcome them?

I couldn’t understand the basics of media query and making the application device-responsive friendly, I over came the challenges by watching some videos and reading some blogs related to responsive web pages and making it little bit responsive, and works perfectly on some devices not on all.

What specific areas of your project would you like help with?

I would like help with more on media query how to use it? where all I can use it? and how to make application responsive friendly on other devices like tablets and mobile, and user-friendly, also I need help on making application responsiveness Tablet and Mobile friendly.

Community feedback

  • Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted 2 months ago

    body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

    Please, consider to add padding for div.card instead of div.card-body(text div).

    Hope you found this comment helpful :)

    Marked as helpful
    0
    sour413•50
    @sour413Posted 2 months ago

    @SvitlanaSuslenkova thank you! it worked my project is aligned properly now, I have to work on multi-device responsiveness.

    0
  • Anton Rassanov•30
    @AntonRassanovPosted 2 months ago

    Looks good. Good job!

    0
    sour413•50
    @sour413Posted 2 months ago

    @AntonRassanov thank you

    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