RuRoman

Прошу прощения, что не информативно ответил.
В общем проблема была из-за
width: calc(50% - 10px);
В стилях вычислялось значение и потому этот элемент скрытый получается занимал пространство. После того как поменял на auto, проблема ушла

Отлично справляется с этим:

@media (min-width: ---px) and (max-width: ---px) {
}

где "---" - необходимое разрешение

У меня почти сработало, надо было еще убрать "\" в строке иначе переменная не приходила...
'RULE' => 'type=$1',

Посмотрите в сторону плагина:
https://ru.wordpress.org/plugins/woocommerce/
Можно реализовать как продажу цифрового контента.