Make sure to watch my previews video to have a better understanding.
CSS:
/* Product Gallery*/
.woocommerce div.product div.images img {
display: block;
width: 70%;
height: auto;
box-shadow: none;
margin: auto;
}
.woocommerce div.product div.images .flex-control-thumbs {
position: relative;
margin: 50px -150px 0px 0px;
}
/* Onsale*/
.woocommerce span.onsale {
background-color: #ffffff;
color: #000;
font-weight: 600;
}
/* Site Font*/
h1, h2, p, a, span, div {
font-family: "Play", Sans-serif;
}
/* Add to cart button*/
.woocommerce div.product.elementor .quantity .qty {
display: inline;
}
/* Product Data Tabs*/
a {
color: yellow;
}
a:hover {
color: yellow;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
background-color: white;
color: black;
border: none;
border-radius: 100px;
padding: 10px 30px
}
/* Secure Checkout Box*/
@media only screen and (max-width:1133px){
selector{
width: 60%;
}
}
@media only screen and (max-width:1025px){
selector{
width: 80%;
}
}
@media only screen and (max-width:768px){
selector{
width: 100%;
}
}