Skip to content
Submitted 7 months ago

@media query

Git-Elimman•30
@Git-Elimman
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Rounding an image and setting up buttons

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

Making an image circular. Centering a div

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

I would like help on a standard way of centering divs and an easy way to making a site responsive

Community feedback

  • Amit Dhakal•510
    @herojk64Posted 7 months ago

    Things you did wrong.

    1. First of all hide the coded by part with styling of display none.
    2. Second you are just using button with breaks for list type of element.
    3. You don't have basic understanding of flex and grid.
    4. Typography is all messed up

    Things you need to learn.

    1. Proper html tags and elements.
    2. Learn CSS from scratch because even if you did use button as list their styling is not properly done.
    3. Proper understanding of flexbox and grid cause the card needs to be in center of the screen.
    4. CSS resets.
    5. Proper naming of files and classes.
    0
    Git-Elimman•30
    @Git-ElimmanPosted 7 months ago

    Thank you, I really appreciate the corrections and will make changes. I have some questions though. What do you mean by proper naming of files? Are you saying I should have used list element instead of button for the links? @herojk64

    0
    Amit Dhakal•510
    @herojk64Posted 7 months ago

    there are naming ways you can follow like an pattern for files which makes your file structure readable. eg, index.html, app.html,aboutus.html, index.css, app.css. and dont use spaces in files use - or _ @Git-Elimman

    0
  • Wendy•1,970
    @wendyhamelPosted 7 months ago

    Hi there!

    To center content you can work with flexbox or grid. For example to center te card on the page, you can set the min height of the main or body to 100vh (full height of the screen) Then you can work with either flexbox or grid to center. Which one you choose depends on where you feel most comfortable with and what content you need to center. Sometimes the best choice is grid: if you need to center all content on some screen sizes and want to arrange the content differently on other screen sizes. If you just need to center on one axis (either horizontally or vertically) flexbox works great most of the time too.

    more information on flexbox: mozilla, css-tricks and grid mozilla, css-tricks

    happy coding!

    0
    Git-Elimman•30
    @Git-ElimmanPosted 7 months ago

    Thank you very much. I take my lessons through w3schools and I didn't fully understand the flexbox lesson at the time. I'll look at it again in comparison to what you have said @wendyhamel

    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