Docs

[Eyoael]

Hi,

I’m trying to create a testimonial for my site, i’m using the following div for my card:

<div id="mainbox">
<div class="card">
  <img src="http://media.npr.org/assets/news/2009/10/27/facebook1_sq-17f6f5e06d5742d8c53576f7c13d5cf7158202a9.jpg?s=1" alt="" />
  <h4>Gunita</h4>
  <p>"Din personal arbetade flitigt, systematiskt och snyggt med väldigt bra resultat. Tack för hjälpen idag! Så söta duktiga flitiga snälla ungdomar! Dom gör verkligen ett fantastiskt jobb."</p>
</div>

And the following css:

.card{
width: 350px;
position: relative;
min-height: 250px;
padding: 10px;
margin: 10px;
}

img{
  border-radius: 50%;
  width: 70px;
  margin: 10px;
}

#mainbox{
  font-family: ;
  box-sizing: border-box;
  justify-content: center;
  display: flex;
flex-wrap: wrap;
}

 with a pricing-shadow effect css: 

.pricing-shadow:hover {
    -webkit-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-top: 2px solid #1974d2 !important;
}
.vc_custom_1475234671116 {
    padding-top: 10px !important;
    padding-right: 35px !important;
    padding-bottom: 10px !important;
    padding-left: 35px !important;
    background-color: #ffffff !important;
}
.vc_row {
    margin-left: -15px;
    margin-right: -15px;
}
.pricing-shadow {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-in-out;
    border-top: 2px solid #eff0f4 !important;
}
.wpb_row {
    margin-left: 0!important;
    margin-right: 0!important;
    margin-bottom: 0!important;
}

The problem that i’m having is that the css for the image targets all images i only want to target the testimonial images. The second problem that i’m having is that when i split the row which contains the testimonials to 1/3 so that i have three testimonials, it looks like it should in cornerstone but on the front end the testimonials are not aligned next to each other instead they appear below each other. I think this is due to that the card is to wide and i have to correct this but it is not working, can you help me with these two problems?

Best regards
Eyoael

[Lely]

Hello Eyoael,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL where the issue exists. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Eyoael]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

img{
  border-radius: 50%;
  width: 70px;
  margin: 10px;
}

To :

.card img{
  border-radius: 50%;
  width: 70px;
  margin: 10px;
}

Upon checking your code, there were some missing </div> tgas, I fixed the following code :

<div id="mainbox">
<div class="card">
  <img src="http://media.npr.org/assets/news/2009/10/27/facebook1_sq-17f6f5e06d5742d8c53576f7c13d5cf7158202a9.jpg?s=1" alt="" />
  <h4>Gunita</h4>
  <p>"Din personal arbetade flitigt, systematiskt och snyggt med väldigt bra resultat. Tack för hjälpen idag! Så söta duktiga flitiga snälla ungdomar! Dom gör verkligen ett fantastiskt jobb."</p>
</div>

Hope it helps.

[Eyoael]

Hi,

The card css fixed the problem. The second issue is still not fixed for me, on the front end the cards are still aligning below each other instead of next to each other. I used the fixed div tags btw. Why isn’t it working?

Thanks

[Joao]

Hi There,

You are missing a </div> on every box.

Hope that helps

Joao

[Eyoael]

Hi,

Great thanks for the help.

[Joao]

You are welcome,

Joao

[Author]

Posts