Редактирование места положения кнопок в сетке товаров

[Serg001]

Всем привет! Подскажите пожалуйста как отредактировать место положение и размер кнопок на странице сетки товаров. Я хочу передвинуть кнопку "сравнить" в правый верхний угол и уменьшить ее. А кнопку "в корзину" растянуть на всю ширину мини изображения. Подскажите пожалуйста как это сделать или куда копать.

 

[tuxfighter]

попробуйте

 .compare {
    right: -100px;
    top: -420px;
    width: 70px;
    height: 30px;
    line-height: 20px;
     padding: 0 10px !important;
     padding-right: 20px !important;
     padding-bottom: 10px !important;
}
.add_to_cart_button {
    width: 80%;
}

 

[Serg001]

Благодарю! Это работает! Донастрою уже сам =) Это решило мою проблему =)

 

[Serg001]

Подскажите как адаптировать? Возможно ли тэг @media применить только к положению кнопки при различных разрешениях экрана?

 

[tuxfighter]

конечно.
@media и предполагает что изменяются только те стили, которые в нем прописаны и вступают в силу при определенном условии

 

[Serg001]

tuxfighter поправь плз если можешь, не работает . Работает только первая часть @media для 1920.

@media only screen and (max-width: 1920px), only screen and (max-device-width: 1920px) {
.compare
   {
    
     right: -500px;
     top: -720px;
     width: 70px;
     height: 30px;
     line-height: 20px;
     padding: 0 10px !important;
     padding-right: 20px !important;
     padding-bottom: 10px !important;
   }

}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
.compare
   {
    
     right: -500px;
     top: -420px;
     width: 70px;
     height: 30px;
     line-height: 20px;
     padding: 0 10px !important;
     padding-right: 20px !important;
     padding-bottom: 10px !important;
   }

}

 

[Serg001]

Парни поправьте кто знает в чем дело плз.

 

[tuxfighter]

что не работает то?
учитывая что у меня разрешение монитора 1280х1024 -))
а вообще вот эти повторяющиеся вещи

width: 70px;
     height: 30px;
     line-height: 20px;
     padding: 0 10px !important;
     padding-right: 20px !important;
     padding-bottom: 10px !important;

все время писать не нужно -))

 

[Serg001]

При изменении разрешения позиция кнопки не переключается . Работает только первая часть кода для
1920px.

 

[tuxfighter]

При изменении разрешения позиция кнопки не переключается

как вы это проверяете?

 

[Serg001]

В гугл хроме, просмотреть код и изменяю ширину, в правом верхнем углу он показывает разрешение, стандартный способ, всегда работает =).

 

[Serg001]

В таком виде все работает без каких либо изменений:

.compare 
   {
     
     width: 70px;
     height: 30px;
     line-height: 20px;
     padding: 0 10px !important;
     padding-right: 20px !important;
     padding-bottom: 10px !important;
   }



@media only screen and (max-width: 1920px), only screen and (max-device-width: 1920px) {
.compare 
   {
     
     right: -500px;
     top: -720px;

   }

}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
.compare 
   {
     
     right: -300px;
     top: -320px;

   }

}

 

[tuxfighter]

ну я не назвал бы это как "все работает"

 

[Serg001]

Проблема решена, дело было в том что свойства top и right не влияют на position: static;
Нужно было указать position: absolute; или position: relative; в свойствах @media. Рабочий код:

.compare
{

width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}



@media only screen and (max-width: 1920px), only screen and (max-device-width: 1920px) {
.compare
{
position: absolute; /* или position: relative;*/
right: -500px;
top: -720px;

}

}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
.compare
{

position: absolute; /* или position: relative;*/
right: -300px;
top: 700px;

}

}

 

[tuxfighter]

position: relative;

это указано в общих стилях всех кнопок

 

[Serg001]

Всех в мире кнопок? Очень сомневаюсь

 

[tuxfighter]

не старайтесь казаться глупее, чем вы есть

<a href="https://sport-print.online?action=yith-woocompare-add-product&amp;id=1068" class="compare button" data-product_id="1068" rel="nofollow">Сравнить</a>

.shopkit .button {

    position: relative;

}
https://sport-print.online/wp-content/uploads/shopkit-5b86abe63c2df.css

 

[Serg001]

Думаю что проблема в том что большое наслоение свойств и классов. Адаптация заработала только после явного указания свойства релатив или абсолют для тега @media.

 

[Serg001]

Как яркий пример, первая часть кода работала сразу, я написал об этом в самом начале. Что не возможно при корректной работе static, так же не работающая вторая часть кода, что невозможно при корректной работе relative.

 

[tuxfighter]

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