CODEWITHSUNDEEP
cssflexbox
drifterOcean19
drifterOcean19

Reputation: 392

Custom card component using Flex

I think I'm quite close to getting it right but the problem I'm having right now is that the texts overflow when the screen gets really small..which is unlikely to happen but I want to fix it so that the texts will never overflow out of the box.

How can I achieve that?

Here's my fiddle - https://jsfiddle.net/q3vue7wy/

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  height: 7.75rem;
  transition: all 300ms;
  box-shadow: 0 2px 4px 0 rgba(224, 224, 224, 0.5);
  border: solid 1px #F5F5F5;
}

.imageContainer {
  flex: 0 0 33%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  flex: 1;
  text-align: left;
  margin: 0 1.1825rem;
}

.title {
  font-size: 1rem;
  margin: 0 0 0.25rem 0;
  padding: 0;
}

.price {
  color: #BAA082;
  font-size: 0.875rem;
  text-transform: uppercase;
  margin: 2rem 0 0;
  padding: 0;
}

@media(min-width: 46.5rem) {
  .wrapper {
    height: 8.75rem;
  }
  .title {
    font-size: 1.1875rem;
  }
  .price {
    font-size: 1rem;
  }
}
<div class="wrapper">
  <div class="content">
    <h4 class="title">Point of sale</h4>
    <p>Point of sale</p>
    <p class="price">From £165</p>
  </div>
  <div class="imageContainer">
    <img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2134&amp;q=80" alt="" class="image"></div>
</div>

Upvotes: 0

Views: 94

Answers (2)

Ismail Dadwad
Ismail Dadwad

Reputation: 1

HTML- Replace the below code to your HTML code

<div class="wrapper">
 <div class="content">
  <h4 class="title">
   Point of sale
  </h4>
  <p class="dec">
   Point of sale
  </p>
  <p class="price">
   From £165
  </p>
</div>
<div class="imageContainer">
 <img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2134&amp;q=80" alt="" class="image">
</div>
</div>

CSS- Replace the below code to your media query code.

@media only screen and (max-width: 600px)
{
 .wrapper{
  height: 8.75rem;
 }
 .title{
  font-size: 0.8rem;
  margin:0;
  padding-bottom:8%;
 }
 .dec{
  font-size: 0.8rem;
  margin:0;
  padding-bottom:8%;
 }
 .price{
  font-size: 0.8rem;
  margin:0;
  padding-bottom:8%;
 }
}

Upvotes: 0

Phoenix1355
Phoenix1355

Reputation: 1652

A simple solution is to make the image width shrink when the card gets too small. To do this, change the following properties:

.wrapper {
  justify-content: space-between;
}

.imageContainer {
  flex: 0 1 33%;
}

.content {
  flex: 0 0 auto;
}

Which should give:

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  height: 7.75rem;
  transition: all 300ms;
  box-shadow: 0 2px 4px 0 rgba(224, 224, 224, 0.5);
  border: solid 1px #F5F5F5;
}

.imageContainer {
  flex: 0 1 33%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  flex: 0 0 auto;
  text-align: left;
  margin: 0 1.1825rem;
}

.title {
  font-size: 1rem;
  margin: 0 0 0.25rem 0;
  padding: 0;
}

.price {
  color: #BAA082;
  font-size: 0.875rem;
  text-transform: uppercase;
  margin: 2rem 0 0;
  padding: 0;
}

@media(min-width: 46.5rem) {
  .wrapper {
    height: 8.75rem;
  }
  .title {
    font-size: 1.1875rem;
  }
  .price {
    font-size: 1rem;
  }
}
<div class="wrapper">
  <div class="content">
    <h4 class="title">Point of sale</h4>
    <p>Point of sale</p>
    <p class="price">From £165</p>
  </div>
  <div class="imageContainer">
    <img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2134&amp;q=80" alt="" class="image"></div>
</div>

JSFiddle: https://jsfiddle.net/wq1cev3y/

Upvotes: 1

Related Questions