Skip to content

Instantly share code, notes, and snippets.

@Xiradorn
Last active March 2, 2022 22:55
Show Gist options
  • Save Xiradorn/42521f122dc0f9924998fd97f4c60669 to your computer and use it in GitHub Desktop.
Save Xiradorn/42521f122dc0f9924998fd97f4c60669 to your computer and use it in GitHub Desktop.
Columns for DIvi Gallery
.xgallery-1 .et_pb_gallery_item {
width: 100% !important;
clear: none !important;
margin: 0 !important;
}
@media (min-width: 981px) {
.xgallery-1 .et_pb_gallery_item {
width: 100% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 980px) {
.xgallery-1 .et_pb_gallery_item {
width: 100% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
.xgallery-1 .et_pb_gallery_item {
width: 100% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 479px) {
.xgallery-1 .et_pb_gallery_item {
width: 100% !important;
clear: none !important;
margin: 0 !important;
}
}
.xgallery-2 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
@media (min-width: 981px) {
.xgallery-2 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 980px) {
.xgallery-2 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
.xgallery-2 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 479px) {
.xgallery-2 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
.xgallery-3 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
@media (min-width: 981px) {
.xgallery-3 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 980px) {
.xgallery-3 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
.xgallery-3 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 479px) {
.xgallery-3 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
.xgallery-4 .et_pb_gallery_item {
width: 25% !important;
clear: none !important;
margin: 0 !important;
}
@media (min-width: 981px) {
.xgallery-4 .et_pb_gallery_item {
width: 25% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 980px) {
.xgallery-4 .et_pb_gallery_item {
width: 25% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
.xgallery-4 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 479px) {
.xgallery-4 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
.xgallery-5 .et_pb_gallery_item {
width: 20% !important;
clear: none !important;
margin: 0 !important;
}
@media (min-width: 981px) {
.xgallery-5 .et_pb_gallery_item {
width: 20% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 980px) {
.xgallery-5 .et_pb_gallery_item {
width: 20% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
.xgallery-5 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 479px) {
.xgallery-5 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
.xgallery-6 .et_pb_gallery_item {
width: 16.6666666667% !important;
clear: none !important;
margin: 0 !important;
}
@media (min-width: 981px) {
.xgallery-6 .et_pb_gallery_item {
width: 16.6666666667% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 980px) {
.xgallery-6 .et_pb_gallery_item {
width: 16.6666666667% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
.xgallery-6 .et_pb_gallery_item {
width: 33.3333333333% !important;
clear: none !important;
margin: 0 !important;
}
}
@media (max-width: 479px) {
.xgallery-6 .et_pb_gallery_item {
width: 50% !important;
clear: none !important;
margin: 0 !important;
}
}
@use 'sass:list'
@use 'sass:map'
@use 'sass:math'
$ary: [1,2,3,4,5,6]
@each $a in $ary
.xgallery-#{$a}
.et_pb_gallery_item
width: math.percentage(1 / $a) !important
clear: none !important
margin: 0 !important
@media (min-width: 981px)
width: math.percentage(1 / $a) !important
clear: none !important
margin: 0 !important
@media (max-width: 980px)
width: math.percentage(1 / $a) !important
clear: none !important
margin: 0 !important
@media (max-width: 767px)
@if $a > 2
width: math.percentage(1 / 3) !important
@else if $a == 2
width: math.percentage(1 / 2) !important
@else
width: math.percentage(1 / 1) !important
clear: none !important
margin: 0 !important
@media (max-width: 479px)
@if $a > 1
width: math.percentage(1 / 2) !important
@else
width: math.percentage(1 / 1) !important
clear: none !important
margin: 0 !important
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment