Skip to content
Submitted almost 2 years ago

Flexbox Product Review Card

Eleanor Etchu•20
@eetchu92
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found difficult knowing whether to use relative or absolute positioning to move the text with the .body container. I didn't know if I could use another property or if the position property was correct. This is my first project so I wasn't sure about a lot of things. The button tag isn't responsive. There is a border on the button tag and I couldn't seem to figure out how to take it off. There is like a black outline and shadow that I don't know why it's there. Furthermore the background of the .body container gets smaller as the page is resized to be smaller but the p element doesn't resize. It just spills over when the page is being resized. I could go on about the many things I don't like about my page but I would love to get some feedback primarily on whether relative positioning was correct or if I could have moved the text (by 7%) somehow differently.

Community feedback

  • Nicolás F•180
    @nicolasfigPosted almost 2 years ago

    Hi Eleanor,, great effort on your first project I don't think it's necessary to use positioning for the text, I can see that you're using flexbox in some parts of your code, try setting a fixed width and height for the card in desktop view that way it stays the same size and doesn't spill over when you resize the page.

    This is what I did for this project

    main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.card {
  width: 600px;
  height: 450px;
  display: flex;
  background-color: var(--white);
  border-radius: 0.75rem;
}

.info > h5 {
  font-family: var(--monserrat);
  text-transform: uppercase;
  color: var(--dark-grayish-blue);
  letter-spacing: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

    As you can see I didn't use the position property and only care about the margins and paddings. Also the fonts aren't working but that's ok if it was your choice not to use them.

    To remove the border from the button you can use

    border: none;

    On the button selector

    Marked as helpful
    0
  • Eleanor Etchu•20
    @eetchu92Posted almost 2 years ago

    Thank you so much for this! I knew using position: relative was a problem. I just wasn't sure on what to do. Thank you both for your reviews!

    1

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