You want to set height which may set for all devices?
Decide upon the design of the site i.e Height on various devices.
Ex:
Height-100px for bubbles on device with -min-width: 700px.Height-50px for bubbles on device with < 700px;Have your css which has height 50px;
and add this media query
@media only screen and (min-width: 700px) {
/* Styles */
.bubble {
height: 100px;
margin: 20px;
}
.bubble:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble1 {
height: 100px;
margin: 20px;
}
.bubble1:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble1:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble2 {
height: 100px;
margin: 20px;
}
.bubble2:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble2:before {
top: 100px;
border-width: 52px 52px 0;
}
}
This will make your bubbles have Height of 100px on devices greater than 700px and a margin of 20px;