css Question posted in
Some basic documentation can be found here.

Css – Fix for anchor tag button takes up full width of image

my a.shop-now button takes up the full height of the image and that was not what I wanted.

HTML:


<div class="carousel-cell">
    <picture> ... </picture>
    <a class="shop-now" href="#"></a>   
</div>

CSS for .carousel-cell:

position: relative;
width: 100%;

CSS for a.shop-now:

bottom: 0;
display: block;
font-size: 13px;
font-weight: 400;
line-height: 130%;
padding: 13px 15px;
position: absolute;
right: 0;
width: auto;

I am not sure what was I missing here – the objective is to have the button being shown to the bottom of the image without overlaying it. Any pointers will be much appreciated, thanks!

Tags:

2

Answers


  1. 0

    Then just remove position: absolute; right: 0; bottom: 0; from the button

    Login or Signup to reply.
  2. 0

    To archive this you need to update the CSS.

    .carousel-cell {
  position: relative;
  width: 100%;
}

.shop-now {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 130%;
  padding: 13px 15px;
  width: auto;
  height: auto;
  max-height: 100%;
}
    <div class="carousel-cell">
    <img src="https://picsum.photos/seed/picsum/200/300" />
    <a class="shop-now" href="#">shop now</a>   
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search