CODEWITHSUNDEEP
htmlcssimageanchor
Alex Zhang
Alex Zhang

Reputation: 13

How can I keep the style of images which wrapped in <a> tags

I have 9 images in a flex display, when they are not wrapped in <a> tags, they look good.

enter image description here

However, I wanna make these images as clickable. So I wrapped them in <a> tags, however, the format changed to this:

enter image description here

The code is:

<div class="nine-products-section">
  <button class="pre-btn">
    <img src="{{media url="wysiwyg/Round-face-test/arrow.png"}}" alt="">
  </button>
  <button class="nxt-btn">
    <img src="{{media url="wysiwyg/Round-face-test/arrow.png"}}" alt="">
  </button>
  <div class="product-container">
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Ana_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener class="
      product-link=""
      ><img src="{{media
      url="wysiwyg/Round-face-test/Logan_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image"></a
    >
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Hugh_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Miles_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Rae_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image"></a
    >
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Stella_Product_Block_3x_622x233.jpg"}}"
      alt="" class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Peggy_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image"></a
    >
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
    >
      <img src="{{media
      url="wysiwyg/Round-face-test/Serge2_Product_Block_3x_622x233.jpg"}}"
      alt="" class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Wilder_Product_Block_3x_622x233.jpg"}}"
      alt="" class="product-image"></a
    >
  </div>
</div>

css:

.nine-products-section {
  position: relative;
  padding: 20px;
  display: flex;
  overflow-x: scroll;
}
.product-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.product-image {
  width: 80%;
  display: flex;
  margin: 0 auto;
}

I tried to style the <a> tag, height/ padding/ width. but they all did not work. How can I make these images keep the old style but clickable to redirect to the links?

Upvotes: 0

Views: 46

Answers (2)

Alex Zhang
Alex Zhang

Reputation: 13

I got it fixed by adding:

a {
    display: contents;
}

in the css file.

Upvotes: 1

Minyeo
Minyeo

Reputation: 1

  1. wrap tag with div
  2. delete .product-image css code, if needed, add it on tag

Upvotes: 0

Related Questions