Home

How to shorten the height of an element in a column?

I’ve made a row with for columns where each of them has a social media icon. For every row there is an anchor tag inside of a div element. Since this row is a column of another row, the height of the first one change automaticaly. The problem is whenever I hover the cursor below of a button (shown with the white border), the pointer is showing up like I’m hovering it on the button.

Also when I inspect the button itself it shows only button with its original height and the code shows the ::before attribute.

I’m using bootstrap as you could notice and tried to solve the problem by changing the padding or height but nothing works acutally.

Here is my code:

<div class="row col-12 justify-content-between mx-0">     <div class="col d-flex justify-content-center"><a href="#" class="fa fa-facebook fa-2x"  style="border: 1px solid white;"></a></div>     <div class="col d-flex justify-content-center"><a href="#" class="fa fa-twitter fa-2x" style="height:"></a></div>     <div class="col d-flex justify-content-center"><a href="#" class="fa fa-instagram fa-2x" style="height:"></a></div>     <div class="col d-flex justify-content-center"><a href="#" class="fa fa-linkedin fa-2x" style="height:"></a></div>     </div>
Asked on July 16, 2020 in CSS.
Add Comment
Cancel
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.