.png)
Code:-
/* Functionality: Custom thumbnail size in product image gallery
* Date: 2021-03-10
* Author: zayed
*/
/* DESKTOP */
.woocommerce .flex-control-thumbs {
margin: 10px 0px 10px -5px !important; /* Thumbnails separation top and bottom */
width: 100% !important; /* Controls width of thumbnails container on desktop - Horizontally */
display: flex;
}
/* Controls thumbnails width on desktop - vertically
* Enable this ONLY for VERTICAL display
*/
ol.flex-control-nav.flex-control-thumbs li {
width: 15% !important;
}
/* Enable this ONLY for HORIZONTAL display */
/*ol.flex-control-nav.flex-control-thumbs li {
width: 18% !important;
}*/
/* PHONES */
@media (max-width:414px){
ol.flex-control-nav.flex-control-thumbs li {
width: 18% !important; /* Controls thumbnails width on mobile - Horizontally */
}
}
/* TABLETS */
@media (min-width:568px) and (max-width:768px){
/* Controls thumbnails container width on tablet - vertically
* Enable this ONLY for VERTICAL display */
.woocommerce .flex-control-thumbs {
margin: 10px 0px 10px -5px !important;
width: 15% !important;
}
/* Controls width of thumbnails container on tablet - horizontally
* Enable this ONLY for HORIZONTAL display */
/*.woocommerce .flex-control-thumbs {
width: 70% !important;
}*/
ol.flex-control-nav.flex-control-thumbs li {
width: 90% !important; /* Controls thumbnails image width on tablet - vertically */
}
}
@media (min-width:769px) and (max-width:1024px){
/* Controls thumbnails container width on tablet - vertically
* Enable this ONLY for VERTICAL display */
.woocommerce .flex-control-thumbs {
margin: 10px 0px 10px -5px !important;
width: 12% !important;
}
/* Controls width of thumbnails container on tablet - horizontally
* Enable this ONLY for HORIZONTAL display */
/*.woocommerce .flex-control-thumbs {
width: 70% !important;
}*/
ol.flex-control-nav.flex-control-thumbs li {
width: 100% !important; /* Controls thumbnails image width on tablet - vertically */
}
}
/* Functionality: Product page image thumbnails on left side
* Date: 2021-03-10
* Author: Rafael Azuaje
* Disable this segment if you want to display horizontally
*/
@media (min-width:568px) {
.woocommerce .flex-control-nav {
position: absolute;
top:-10px;
left: 0px;
}
.flex-control-thumbs {
display: flex;
flex-direction: column;
}
}
@media (min-width:568px) and (max-width:768px){
.woocommerce .flex-viewport {
width: 86.5% !important;
left: 100px !important;
}
}
@media (min-width:769px) and (max-width:1024px){
.woocommerce .flex-viewport {
width: 87% !important;
left: 95px !important;
}
}
@media (min-width:1025px){
.woocommerce .flex-viewport {
width: 85% !important;
left: 80px !important;
}
}
Comments
Post a Comment