Product landing page issue!

Hey folks!!
This is the code i have written so far for the product landing page- https://codepen.io/urvashi965/full/aPLQYG .
The issue here is that the hovering over the select button changes the size of the product boxes also. Any help about how to solve this would be appreciated. I tried several things to solve this but it is not working.

Hi! Try to use

#submit:hover { transform: scale(1.2); }

(1.2) this is an increase of 20%

1 Like

Hi!
Maybe you can fix the size of your column class. I tried added height attribute and set it to 220px as under:

.column{
display:flex;
flex-direction:column;
align-items:center;
border-style:solid;
padding:25px;
margin:80px 50px 50px 50px;
height: 220px;
}

Instead of changing the size of the button just add some orange outline to it on hover. Outline does not resize the surrounding div. You’ll need to remove the border though.

#Accessories button{
  width:90px;
  height:25px;
  background-color:#E3561E;
  border:none;
  }
#Accessories button:hover{
/*   width:115px;
  height:35px; */
  outline:solid #E3561E 5px;
}

I’ve seen more elaborate solutions where you preserve the effect of a border. If you are dead set on the border google that.

I agree with the first answer.

You can use that.

#Accessories button:hover{
transform:scale(1.3,1.3);
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
}

Thank you

Yes!! Changing the size of the column class fixed this issue.
Thank you so much.