Skip to content
OverviewSolutions
12
Comments
5
Timothy Fawcett
@timbosTours

All comments

  • Gift Richard•520
    @fibonacci001Submitted over 1 year ago

    Although using CSS alone worked, it was a little buggy. I would appreciate any feedback you may have on it

    FAQ Questions

    2
    Timothy Fawcett•250
    @timbosToursPosted over 1 year ago

    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
    @NikkaburgerSubmitted over 1 year ago
    • 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.

    Product Preview card solution

    2
    Timothy Fawcett•250
    @timbosToursPosted over 1 year ago

    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.php

    And 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
    @fbuonojrSubmitted over 1 year ago

    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!

    QR Code Using Bootstrap

    3
    Timothy Fawcett•250
    @timbosToursPosted over 1 year ago

    You can try adding min-height: 100vh; to the body

    0
  • Frank Buono•20
    @fbuonojrSubmitted over 1 year ago

    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!

    QR Code Using Bootstrap

    3
    Timothy Fawcett•250
    @timbosToursPosted over 1 year ago

    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
  • Timothy Fawcett•250
    @timbosToursPosted over 1 year ago

    I can't see your code but your positioning looks pretty bang on to me!

    1