Title: problem with CSS
Last modified: October 24, 2025

---

# problem with CSS

 *  [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [7 months, 1 week ago](https://wordpress.org/support/topic/problem-with-css-34/)
 * 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)](https://wordpress.org/support/users/sterndata/).
      Reason: formatting
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fproblem-with-css-34%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Jair – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport15/)
 * (@wpmudevsupport15)
 * [7 months, 1 week ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18694753)
 * 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/](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](https://wordpress.org/support/users/bvbaked/)
 * (@bvbaked)
 * [7 months, 1 week ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18695157)
 *     ```wp-block-code
       .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](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [7 months, 1 week ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18695408)
 * 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](https://wordpress.org/support/users/anmolwpswings/)
 * (@anmolwpswings)
 * [7 months ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18699696)
 * You can try this and it will definately work [@sacconi](https://wordpress.org/support/users/sacconi/)
 *     ```wp-block-code
       .prezzo {    margin-block-start: auto;    padding: 15px 10px;}.prezzo input.prezzo[type=button] {    margin: 0;}
       ```
   
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [7 months ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18699927)
 * that was a good starting point! Now I’m here
 *     ```wp-block-code
       /* 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](https://wordpress.org/support/users/anmolwpswings/)
 * (@anmolwpswings)
 * [7 months ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18700679)
 * A zoom/enlarged effect is here my friend [@sacconi](https://wordpress.org/support/users/sacconi/)
 *     ```wp-block-code
       .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](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [7 months ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18700982)
 * not bad but it seems that the photo, in addition to enlarging, tilts to the right…
 *  [Nithin – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport11/)
 * (@wpmudevsupport11)
 * [7 months ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18701115)
 * Hi [@sacconi](https://wordpress.org/support/users/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:
 *     ```wp-block-code
       .archive #primary .post a.post-thumbnail img:hover {    transform: scale(1.12) rotate(1deg);    border-radius: 0;}
       ```
   
 * Regards,
 * Nithin

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

The topic ‘problem with CSS’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 5 participants
 * Last reply from: [Nithin – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport11/)
 * Last activity: [7 months ago](https://wordpress.org/support/topic/problem-with-css-34/#post-18701115)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics