Bootstrap 4 cards responsive with same height on multiple rows - css
I'm new to design and Bootstrap so bear with me.
I want to have a number of cards with equal height and width (not fixed but responsive) on all rows, or put in another way, all cards should be as tall and wide as the biggest of them all . Any solution is welcome, not limited to Bootstrap.
In example below on large screens the row and card height is increasingly bigger and on medium screens almost every row has different height:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
How about adding style="height: 200px; max-height: 200px; overflow-y: auto;" to all the divs with the class of card-body
Here's the code:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
This will make all the rows of the same height.
Related
How to place two bootstrap cards next to each other
I want to place the two cards next to each other (horizontally) but currently they are vertically aligned. That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically. <div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Heading 1</h5> <p class="card-text">some text</p> a button </div> </div> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Heading 2</h5> <p class="card-text">some text</p> a button </div> </div>
You can use Bootstrap’s grid to achieve this: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 d-flex justify-content-center"> <div class="card" style="width: 20rem;> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Heading 1</h5> <p class="card-text">some text</p> a button </div> </div> </div> <div class="col-sm-6 d-flex justify-content-center"> <div class="card" style="width: 20rem;> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Heading 2</h5> <p class="card-text">some text</p> a button </div> </div> </div> </div> </div>
Btn is not at right
I want to have a a h5 "Posts" at left and the button "Btn" at right, however the "Btn" is not at right is at the left of the .col div, do you know how to proper position the button at right? With 'justify-content-end' is not working. Also I want to have 4 cards with equal width in each row, but do you know why the cards appear so long? Is not possible that the card is more like a square and not a rectangle? Example: http://jsfiddle.net/1b790tL5/ HTML: <div class="container"> <div class="row"> <div class="col"> <h5 class="display-5 font-weight-bold text-dark">Posts</h5> </div> <div class="col justify-content-end"> Btn </div> </div> </div> <div class="container mt-4"> <div class="card-deck"> <div class="card p-0 shadow"> <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap"> <div class="card-body"> <h5 class="card-title text-dark font-weight-bold">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> </div> </div> <div class="card p-0 shadow"> <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap"> <div class="card-body"> <h5 class="card-title text-dark font-weight-bold">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-0 shadow"> <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap"> <div class="card-body"> <h5 class="card-title text-dark font-weight-bold">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-0 shadow"> <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap"> <div class="card-body"> <h5 class="card-title text-dark font-weight-bold">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div>
refer the image below. items take equal width when you use col class, in order to control the width add a number like col-1 to col-10 or 12 as per the framework.
Do you know why are only appear 3 cards?
I'm using bootstrap and I want to have 4 cards in a row ,each card occupying the same width. But with the code below is not working. Only 3 cards are appearing. It seems that the issue is because there is a lot of margin between each card. Do you know how to properly solve this issue? Example: http://jsfiddle.net/h82w46Lz/1/ HTML:: <div class="container mt-4"> <div class="row"> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> <div class="col mb-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Read </div> </div> </div> </div> </div>
Close the row div for the first four cards and add "col-lg-3" class instead of "col" and do the same for the second four cards.
Bootstrap 4 - How to float a div on the right of Cards?
I want to put a div on the side of the cards, i tried to put a div on the cards <div class="col-lg-8"> and a col-lg-4 on the div that should float on the right of cards, but when i add the col-lg-8 and col-lg-4 the cards lose the inline layout, and the the div that should float on the right, does not appear. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container-fluid"> <div class="row"> <div class="col-lg-8"> <div class="col-3"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> <div class="col-3"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> <div class="col-3"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> <div class="col-3"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> <div class="col-3"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> <div class="col-3"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> </div> <div class="col-lg-4" style="background-color: blue"> </div> </div> </div> How it should be:
Given block of code was <div class="col-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap"> <h4 class="card-title">Card title</h4> </div> </div> In order to match the requirements, I added float-left class to <div class="col-4">. The div to the right with blue background was also rendered.
Using bootstrap cards as a hyperlink
I have a bootstrap card Which is used as a link. Trying to wrap it with <a> changes all of the styling of the card. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="width: 15rem; display: inline-block"> <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Normal card</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <a href=""> <div class="card" style="width: 15rem; display: inline-block"> <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Wrapped with a tag</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </a> How should I wrap the card in order to preserve its looks and use it as a link?
If you are using Bootstrap 4.3 you don't have to wrap card with <a> tag, but instead put it inside card-body, and use stretched-link class. This is much cleaner way.
Visit https://getbootstrap.com/docs/4.3/utilities/stretched-link/ for more details.
If you can't use Bootstrap 4.3 this is styling for stretched-link class:
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0,0,0,0);
}
Here is the example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Alternative</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Its because <a> tags has a default blue color from user agent browser. Try to add a class to the link and set color:inherit to that class
a.custom-card,
a.custom-card:hover {
color: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<a href="" class="custom-card">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</a>
Instead of wrapping the .card in a <a>, you could use a <a> as the card element instead of a <div>.
This will allow you to easily override the CSS to remove the default <a> styles:
a.card,
a.card:hover {
color: #212529;
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<a href="#" class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</a>
Very simple with Stretched link <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card with stretched link</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Go somewhere </div> </div>
bootstrap make it easy with Stretched link <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card with stretched link</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> Go somewhere </div> </div>
You can put text-dark utility class to the element to have the same appearance. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <a href=""> <div class="card text-dark" style="width: 15rem; display: inline-block"> <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Wrapped with a tag</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </a>
Try to add Display: Block to the link itself. Use your browsers Developer Tools (F12) and hover over the link to see if you need to add Height:auto perhaps.
I had the same problem. I fixed it with this trick. You can specify the color whatever you like and put a 00 at the end of the color code to make it transparent this way you make the style invisible. e.g. <a href="" style="color: #83577500; ">
Just add "cursor: pointer;" to your style