CODEWITHSUNDEEP
htmlcsstwitter-bootstrapanchor
aatj
aatj

Reputation: 21

anchor over whole card out of range

I am trying to make a whole card clickable by having an anchor tag <a> around it, but the anchor seems to extend beyond the card area as shown in the teal area below.

enter image description here

HTML

<div class="post-slider">
    <div class="post-wrapper">
        <a class="text-light bg-info mx-2" style="text-decoration: none; height: 100%; width 100%" href="#">
            <div class="course-card col-lg-10 col-md-6 p-0 my-2 mx-4" style="width: 300px; height:280px;">
                <div>
                    <img src="../images/courses/<?php echo $courseImage; ?>" class="img-fluid">
                    <div class="pl-3">
                        <div class="mt-3"><?php echo $courseName; ?></div>
                        <div class="text-secondary pl-3" style="position: absolute; bottom: 0;">
                            <div class="row align-items-center">
                                <div class="ml-2">
                                    <div><small>John Doe</small></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

CSS

.post-slider {
    margin: 0px auto;
    position: relative;
}

.post-slider .post-wrapper {
    width: 100%;
    height: 350px;
    margin: 0px auto;
    overflow: hidden;
}

.post-slider .post-wrapper .post {
    height: 350px;
    width: 300px;
    margin: 0px 10px;
    display: inline-block;
}
    .course-card {
        border: 1px solid rgb(40, 40, 40);
        background-color: rgb(22, 22, 30);     
    }

If I move the anchor tag below the first div it works fine, but any empty area below the image isn't clickable anymore, only text and image are.

How can I make the card area only clickable, but also its contents including empty space.

Upvotes: 1

Views: 129

Answers (1)

erc&#252;ment
erc&#252;ment

Reputation: 137

before:

<div class="course-card col-lg-10 col-md-6 p-0 my-2 mx-4" style="width: 300px; height:280px;">

my-0 mx-0, after:

<div class="course-card col-lg-10 col-md-6 p-0 my-0 mx-0" style="width: 300px; height:280px;">

Upvotes: 1

Related Questions