Product landing page - issues with tables not wrapping

Code Feedback
1

I am almost completed the assignment for the product landing page however i can’t figure out why the price tables are not wrapping to its separate block at 797px, i thought tat flex-wrap: wrap and any width grrater than 50% would solve the issue. I also tried adding box-sizing: content-box below is the html/css code:

Bronze

  • $20 Per Month
  • choice of 1 sport only
  • Accessible Monday to Friday
  • Daytime only
  • Non-priority queuing
  • Equipment fee $10 per item

Platinum

  • $50 Per Month
  • All 3 sports included
  • Accessible Monday to Friday
  • daytime afternoon and evening
  • priority queuing
  • Equipment at no additional cost

Gold

  • $35 Per Month
  • choice of 2 sport only
  • Accessible Monday to Friday.
  • Daytime and afternoon
  • Non-priority queuing
  • Equipment fee $7 per item

#tariff-container {
display: flex;
text-align: center;
}

#tariff-container > * {
flex-basis: 30%;
}

.tariff {
border-right: 1px solid black;
border-left: 2px solid black;
border-bottom: 2px solid black;
margin-left: 0.5em;
/* flex:1 1 auto; */
}

@media screen and (max-width: 797px) {
#title {
font-size: 175%;
}

#main {
    margin-left: -4em;
}

#tariff-container {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    width: 60%;
}

}

2

Can you supply a link to a code pen or somewhere we can look at the html and css together?

1 Like
3

Hi, I don’t have a codepen however i do a link on my webhost

4

i managed to fix it i wasn’t paying attention to detail :grin: flex-direction: column was not specifed at media query 797px on #tariff-container, problem solved :sunglasses: