1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?php $base_gutter = 10; ?> <?php $desktop_cut_count = $desktop_count - 1 ?> <?php $desktop_gutter = $base_gutter * $desktop_count / $desktop_cut_count ; ?> <?php $desktop_width = 100/ $desktop_count ; ?> <?php $tablet_cut_count = $tablet_count - 1 ?> <?php $tablet_gutter = $base_gutter * $tablet_count / $tablet_cut_count ; ?> <?php $tablet_width = 100/ $tablet_count ; ?> <?php $mobile_cut_count = $mobile_count - 1 ?> <?php $mobile_gutter = $base_gutter * $mobile_count / $mobile_cut_count ; ?> <?php $mobile_width = 100/ $mobile_count ; ?> .uniform_block_<?php echo $mod_count ; ?>.block_count_<?php echo $desktop_count ; ?> .single_uniform_image { width: calc(<?php echo $desktop_width ; ?>% - <?php echo $base_gutter ; ?>px); margin-right: <?php echo $desktop_gutter ; ?>px; margin-bottom: <?php echo $desktop_gutter ; ?>px; } .uniform_block_<?php echo $mod_count ; ?>.block_count_<?php echo $desktop_count ; ?> .single_uniform_image:nth-child(<?php echo $desktop_count ; ?>n) { margin-right: 0px; } @media screen and (max-width: 1200px) { .uniform_block_<?php echo $mod_count ; ?>.tablet_block_count_<?php echo $desktop_count ; ?> .single_uniform_image { width: calc(<?php echo $tablet_width ; ?>% - <?php echo $base_gutter ; ?>px); margin-right: <?php echo $tablet_gutter ; ?>px; margin-bottom: <?php echo $tablet_gutter ; ?>px; } } @media screen and (max-width: 900px) { .uniform_block_<?php echo $mod_count ; ?>.mobile_block_count_<?php echo $desktop_count ; ?> .single_uniform_image { width: calc(<?php echo $mobile_width ; ?>% - <?php echo $base_gutter ; ?>px); margin-right: <?php echo $mobile_gutter ; ?>px; margin-bottom: <?php echo $mobile_gutter ; ?>px; } } |