problem with CSS

sacconi
(@sacconi)

7 months, 1 week ago
I’d like to achieve this result: the green button and icons should always be aligned at the bottom and as low as possible in the post’s square. The icons should not lose their position to the right when the button is not present.

I have this for now, but it doesn’t work well enough.

/* non comprensibile*/ .prezzo { display: flex; align-items: baseline; } /** * icona segnaposto e icona calendario */ .prezzo { display: flex; justify-content: space-between; padding-right: 10px; padding-bottom: 5px; } /* icona segnaposto e icona calendario consigli chat GPT */ .prezzo { display: flex; align-items: center; justify-content: flex-end; /* tiene tutto a destra */ gap: 10px; /* spazio costante tra icone e pulsante */ padding-right: 10px; padding-bottom: 5px; } /* L'icona calendario e la mappa devono stare vicine tra loro */ #icona-calendario2 { order: 1; } #puntosumappa { order: 2; } /* Il pulsante “a partire da” (se presente) resta il primo */ .prezzo form { order: 0; margin-right: auto; /* lo spinge a sinistra, ma lascia le icone vicine */ } /* Se vuoi che le icone siano ancora più attaccate tra loro */ #icona-calendario2, #puntosumappa { display: inline-flex; align-items: center; gap: 6px; }
- This topic was modified 7 months, 1 week ago by Steven Stern (sterndata). Reason: formatting
The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Jair – WPMU DEV Support
(@wpmudevsupport15)

7 months, 1 week ago

It seems complicated to do using only Flex positions. I suggest you to try using Grid instead:
https://css-tricks.com/snippets/css/complete-guide-grid/

For example, you can use the property “grid-column-start” so the icons will always appear in the right of the container, regardless if there is a button on the left side. For the container, the “align-items” property can help you so the bottom elements will always be properly aligned to the bottom of the container.

Kind regards,
Jair.
bvbaked
(@bvbaked)

7 months, 1 week ago
```
.entry-header { 
  display: flex;
  flex-direction: column;
  height: 100%;
}

.prezzo {
  margin-block-start: auto;
}
```
If I follow you correctly, this worked when I checked in browser.
Making the entry-header element into a flex container will allow you to use auto margins so that you can align the link/icons to the bottom of each card no matter how long the text is. It needs the height of 100% so that it fills the available space as well.

The rest of your ask seems in place as the icons are already aligned to the right.
There is some extra margin around the button you may want to remove – it is on the input inside the link if you’re looking for the specific element.
Thread Starter sacconi
(@sacconi)

7 months, 1 week ago

it seems better as long as the icons position goes, the only problem is that the base-line of the button is not the same then the icons, any suggestion? thank you
Anmol Verma
(@anmolwpswings)

7 months ago
You can try this and it will definately work @sacconi
```
.prezzo {
    margin-block-start: auto;
    padding: 15px 10px;
}

.prezzo input.prezzo[type=button] {
    margin: 0;
}
```
Thread Starter sacconi
(@sacconi)

7 months ago
that was a good starting point! Now I’m here
```
/* allinea la base del pulsante prezzo con l'icona calendario e segnaposto */
.prezzo {
    margin-block-start: auto;
   padding-left:15px;
}
.prezzo input.prezzo[type=button] {
    margin:0;
}
#icona-calendario2, #puntosumappa {margin-top:5px;
	}
.entry-title{
    margin-bottom:8px
}
```
would you have a system to put a on hover effect on pics (zoomed/enlarged) without breaking the width of the post box?
Anmol Verma
(@anmolwpswings)

7 months ago
A zoom/enlarged effect is here my friend @sacconi
```
.archive #primary .post a.post-thumbnail {
    display: inline-block;
    overflow: hidden;
    margin: 10px;
    border-radius: 20px;
    aspect-ratio: 800 / 600;
}

.archive #primary .post a.post-thumbnail img {
    transition: all 0.3s linear;
    padding: 0;
    object-fit: cover;
}

.archive #primary .post a.post-thumbnail img:hover {
    transform: scale(1.12) rotate(1deg);
    border-radius: 0;
}
```
Thread Starter sacconi
(@sacconi)

7 months ago

not bad but it seems that the photo, in addition to enlarging, tilts to the right…
Nithin – WPMU DEV Support
(@wpmudevsupport11)

7 months ago
Hi @sacconi,

not bad but it seems that the photo, in addition to enlarging, tilts to the right…

Just remove rotate(1deg) from the given CSS above:
```
.archive #primary .post a.post-thumbnail img:hover {
    transform: scale(1.12) rotate(1deg);
    border-radius: 0;
}
```
Regards,

Nithin