Where to put the anchor tags to wrap a card?

[mint radish]

Hello there,
I'm running into an issue with cards that I have to wrap in anchor tags to make the whole card clickable.
I'd initially place the anchor tags outside the <div class="accomodation-card">, and it worked fine until I had to give a width to my card using flex-basis. That width would not apply. All cards are placed within a flex-container.

<a href="">
<div class="accomodation-card">
    <img src="images/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" class="accomodation-img" alt="auberge La Canebière à Marseille">
    <div class="accomodation-text">
        <p><strong>Auberge La Canebière</strong></p>
        <p>Nuit à partir de 25€</p>
        <i class="fa-solid fa-star blue-star"></i>
    </div>
</div>
</a>

I then placed the anchor tags withing the card div, as shown below. it works, but is it the most conventional solution?

<div class="accomodation-card">
  <a href="">
    <img src="images/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" class="accomodation-img" alt="auberge La Canebière à Marseille">
    <div class="accomodation-text">
        <p><strong>Auberge La Canebière</strong></p>
        <p>Nuit à partir de 25€</p>
        <i class="fa-solid fa-star blue-star"></i>
    </div>
  </a>
</div>

A scrim:
https://scrimba.com/scrim/cLwJBrCd

[dusty spire]

The issue here I think is that <a> has a default display type of "inline" which will NOT respond to width/height settings... Instead set the display of your <a> tags to "inline-block" then you can wrap your whole card in an <a> just like you originally did...

Hmmm... that's weird - your Scrim looks like it should break according to your problem description above (i.e. it's an <a> around the entire <div>) but it appears to be working on my side of things... Perhaps I'm not understanding exactly what's going wrong?

Aha - your flex: property for .accomodation-flex a is 1 246px - you're not setting the basis there but the shrink I think... you'd need to either set the basis by itself OR use the 3-digit variant of the shorthand: flex: <grow> <shrink> <basis>

[mint radish]

Hey @Bill,
Thanks for your input. I'll look into the display.

I want to achieve this (see screenshot) where each card is 246px wide. I must use flexbox (where grid would have made more sense, but... requirements...)
I'm having a hard time getting the hang of the flex basis

[dusty spire]

I hear ya... see my last comment about use of the flex shorthand... when you use only two values you're setting grow, shrink and not basis...

[mint radish]

nope, that didn't change anything.

[dusty spire]

Again maybe I don't understand but it appears to be working for me after changing the flex shorthand - also what I'm seeing is that 246px is too wide for the container I think and so it's causing it to wrap after 2 cells... Here's what I see for example when I narrow the basis to 230px:

[mint radish]

i still can't get the right aspect ratio for the cards. Even after adjusting the parent container size.

and I tried changing the display of the amchor to inline-block, but it didn't change anything.

[dusty spire]

I think that the aspect of the card is largely being driven by the image itself... in the style for .accomodation-img however you have hard set the height to 124px with width of 100% and a fit to "cover" which means that the image when "streteched" wide with have a rectangular shape with cropping... I think that you're going to need to play with the img properties there to get what you want... Eg. maybe the height shouldn't be fixed (or set a min-height) to preserve aspect ratio when your container changes...

removed height from .accomodation-img and it gives a proper aspect...

But now the "Chez Amina" pic is too high - give .accomodation-img ``max-height: 150px" and it looks like this:

[mint radish]

ok tis is driving me nuts for a few pixels lol. I'm going to call it quits. It's not exactly like the design I was given but... let's move on 😄
Thanks for your help Bill, much appreciated.

I'll let you know if I find a solution.

[dusty spire]

np, gl!

[azure badge]

@mint radish I haven't gone through all the comments, but a couple of things:

You can have your a tag on the card heading (title) and spread the click area with an absolutely positioned pseudo content on the link, giving the card a relative position. eg

.card {
  position: relative;
}
.card-heading-link::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

<article class="card">
  <h3 class="card-heading">
    <a class="card-heading-link" href="#">Card Title</a>
  </h3>
  <img... />
  ....
</article>

I am not particular convinced about your html semantic structure, but I don't know how far have you gone in this field yet, and this is something that one has to work out. I showcase a bit of semantics in my example above. Eg. the card's title should not be a bold paragraph text; I'd use articles differently etc. Just mentioning.

[mint radish]

Hi @azure badge ,
Thanks for your input.

1. I've never used ::after pseudo class. What would be the benefit of it compared to my beginner's approach?
2. thanks for this. I was not convinced by my structure either. I didn't think of using <article> for the individual cards.

[azure badge]

1. I've never used ::after pseudo class. What would be the benefit of it compared to my beginner's approach?

I haven't evaluated your approach. Wrapping blocks with an anchor to make blocks clickable is a valid technique. The pseudo content would do the same, without the need of anchor-wrapping your block; this technique comes perhaps from times when the anchor tag could not be used to wrap block elements as it was an inline element before; also, it might be a bit elegant, but it's perfectly fine to use wraps.