Gift Richard• 520
@fibonacci001
Submitted
Although using CSS alone worked, it was a little buggy. I would appreciate any feedback you may have on it
Timothy Fawcett
@timbosTours
All comments
- Timothy Fawcett• 250
@timbosTours
Posted
Nice job my friend, never hurts to throw in an extra media query or 2. or you could just adjust your current media queries breakpoint. go up too 1000px then move it up or down from their until everything fits nicely. hope that helps! happy coding!
1 - Nikkaburger• 140
@Nikkaburger
Submitted
- Displaying different images for desktop and mobile version. Aligning the discounted price to the centered height of the price.
- None
- Any best practices method to align the discounted price to mid height of the price.
Timothy Fawcett• 250@timbosTours
Posted
hello friend,
In order to show/hide the different images for desktop and mobile you can use
display: none;inside of a css media query. https://www.w3schools.com/cssref/css3_pr_mediaquery.phpAnd heres a great article I found about alignment. https://dev.to/venkyakshaya/the-ultimate-guide-to-center-align-css-2h9l
Hope that helps and Good Luck!
Marked as helpful
0 - Frank Buono• 20
@fbuonojr
Submitted
I am new to front end development and would really appreciate some advice on how to make this look nicer overall. I was trying to center the card in the page and could not figure out how to do so. Also, my card ends up not looking so great as the page gets really big or really small. Lastly, I was not sure what the directions meant by the phone and desktop widths so any help with that would be greatly appreciated. Thank you in advance!
Timothy Fawcett• 250@timbosTours
Posted
You can try adding min-height: 100vh; to the body
0 - Frank Buono• 20
@fbuonojr
Submitted
I am new to front end development and would really appreciate some advice on how to make this look nicer overall. I was trying to center the card in the page and could not figure out how to do so. Also, my card ends up not looking so great as the page gets really big or really small. Lastly, I was not sure what the directions meant by the phone and desktop widths so any help with that would be greatly appreciated. Thank you in advance!
Timothy Fawcett• 250@timbosTours
Posted
Hello friend,
To centre the card you can use
body { display: flex; justify-content: center; align-items: center; text-align: center; }To control the size of the card you can use combinations of min-height or max-height, min-width or max-width.
And to make it look a little nicer you can curve the edges with border-radius and add a box-shadow for some visual depth. You can also the move the attribution section to the bottom of the page with something like;
.attribution { position: fixed; bottom: 0; display: none; }Hope that helps :)
0 - Théo Guérin• 10
@TheoGuerin64
Submitted
I'm not sure about my positioning inside of the QR code, is there a better way to do it ?
Timothy Fawcett• 250@timbosTours
Posted
I can't see your code but your positioning looks pretty bang on to me!
1
