Слежение за обьектами Wordpress и изменение свойств CSS средствами JS

[doi7ing]

Сейчас имею:
1)Движок WordPress
2)Установлена не стандартная тема Annina(не стандартная тк
переработанная) в неё адаптивный дизайн и есть проблемма вида этой
самой адаптивной сетки... а именно когда новостей в категории две, а
экран например 1366px, то смотрятся эти темы мягко говоря неочень...

Решено было:
растягивать эту адаптивную сетку средствами JS, чтоб эти две темы занимали весь экран...

Получилось примерно следующее решение:

<script type="text/javascript">
	window.onresize = benres;
	window.onload = benres;
function benres() {
    var catcol=<?php echo get_category(get_category(is_category())->count)->category_count; ?>;
	var heightmin= document.documentElement.clientWidth;
	//alert ("в этой категории "+ catcol +" новости, ширана страницы "+ heightmin);
	if (catcol == '2') { 
		document.querySelector('style').innerHTML += '@media (max-width: 1366px) {.anninamas, .grid-sizer {width: 50% !important;}}';
		document.querySelector('style').innerHTML += '@media (max-width: 1920px) {.anninamas, .grid-sizer {width: 50% !important;}}';
	} else if (catcol == '3'){
		document.querySelector('style').innerHTML += '@media (max-width: 1920px) {.anninamas, .grid-sizer {width: 33.33333% !important;}}';};
}	
</script>

Воможно не самое изящьное решение, но что пришло в голову...

Сейчас этот код работает коректно, тоесть выполняет свое предназначение, но если экран браузер начинаешь растягивать или уменьшать то:
1) плодятся стили и соответственно ничего не меняется, а только
уменьшаются пропорции новостей тк стоит правило !important
2) сколько не вкарячивал проверку ширины чтоб если она меньше
900px то эти правила не использовались а использовались стили
поумолчанию... так ничего толкового не вышло...

в JS новичек но изучаю потихоньку...
может кто посоветует иное решение=)

[Nexus]

1) плодятся стили и соответственно ничего не меняется, а только
уменьшаются пропорции новостей тк стоит правило !important

Почему эти правила не вставить просто в css файл?

2) сколько не вкарячивал проверку ширины чтоб если она меньше
900px то эти правила не использовались а использовались стили
поумолчанию... так ничего толкового не вышло...

@media (max-width: 1366px) and (min-width: 900px) {
    .anninamas, .grid-sizer {width: 50% !important;}
}

[doi7ing]

@media (max-width: 1366px) and (min-width: 900px) {
    .anninamas, .grid-sizer {width: 50% !important;}
}

не совсем понятно куда это воткнуть... и если я правильно понимаю то тут будет примененно 50% !important и к 1366px и к 900px... или чтото я неправильно вижу...

[doi7ing]

@media (max-width: 1366px) and (min-width: 900px) {
    .anninamas, .grid-sizer {width: 50% !important;}
}

сейчас попробовал сократить код изменив

document.querySelector('style').innerHTML += '@media (max-width: 1366px) {.anninamas, .grid-sizer {width: 50% !important;}}';
        document.querySelector('style').innerHTML += '@media (max-width: 1920px) {.anninamas, .grid-sizer {width: 50% !important;}}';

на

document.querySelector('style').innerHTML += '@media (max-width: 1366px) and (max-width: 1920px) {.anninamas, .grid-sizer {width: 50% !important;}}';

но такое правило не подействовало на разрешение 1920px а только до разрешения 1366px срабатывает... получается оно не отрабатывает "and" или это как условие "else"?! и так голова болела а теперь совсем ппц

[Nexus]

doi7ing,

@media (max-width: 1366px) and (min-width: 900px)

Читается так: если размер "экрана" у пользователя больше 900px и меньше 1366px, то применить следующие правила.
https://webref.ru/css/value/media

Непонятно зачем писать скрипт, если css можно разместить на нужных страницах единожды и без js.

[Dilettante_Pro]

doi7ing,

такое правило не подействовало на разрешение 1920px а только до разрешения 1366px срабатывает

А чем у вас правило на 1366 отличается от 1920? Зачем два параметра?

[doi7ing]

@media (max-width: 1366px) and (min-width: 900px)

Точно
Сразу не увидел "min-width" а прочитал как "max-width" извиняюсь
за рабочий день глаза замылялись и плохо к концу дня вижу(размыто все)

а код нужен для того, чтоб если категории будут плодится и гдето будут подобные нюансы, чтоб не копаться больше и не добавлять ручками на страницу стили... просто сайт не мой и сколько я с ним проживу неизвестно а если в будующем передам комуто то и у человека вопросов не будет

[doi7ing]

doi7ing,

А чем у вас правило на 1366 отличается от 1920? Зачем два параметра?

если оставить только один параметр то при смене размера экрана и сетка начинает подчиняться другим правилам