Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator

@ryanimd

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Does anyone have any tips for centering my button without relying on margin? I used margin-left because that's just what ended up working for me, but I'm curious as to what best practice would be for that. Any and all constructive feedback welcome!

Community feedback

Shawn Lee 560

@OGShawnLee

Posted

Greetings. Brilliant work you did there!

For the button I would use absolute positioning:

  1. position: relative to the container
  2. position: absolute to the button
  3. bottom: (around -1.75rem idk); + left: 50%; + transform: translateX(-50%)

That should get your button more or less where it should be.

Keep learning and improving. Hope this helps! :)

0

Account Deleted

You can include the button inside the first div, give the first div a position: relative; and center the button with:

position:absolute;
left: 50%; 
bottom: -10px; // or the value that you need to make it leave the div on the Y axis
transform: translateX(-50%);

All the best.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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