Submitted 25 days ago

@media query

Git-Elimman• 20

@Git-Elimman

Preview site View code

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

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• 220

@herojk64

Posted 25 days ago

Things you did wrong.

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

Things you need to learn.

Proper html tags and elements.
Learn CSS from scratch because even if you did use button as list their styling is not properly done.
Proper understanding of flexbox and grid cause the card needs to be in center of the screen.
CSS resets.
Proper naming of files and classes.

Git-Elimman• 20

@Git-Elimman

Posted 23 days 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

Amit Dhakal• 220

@herojk64

Posted 23 days 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

Wendy• 1,670

@wendyhamel

Posted 25 days 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!

Git-Elimman• 20

@Git-Elimman

Posted 23 days 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

Please log in to post a comment

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