• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

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

Serg001

Новичок
Всем привет! Подскажите пожалуйста как отредактировать место положение и размер кнопок на странице сетки товаров. Я хочу передвинуть кнопку "сравнить" в правый верхний угол и уменьшить ее. А кнопку "в корзину" растянуть на всю ширину мини изображения. Подскажите пожалуйста как это сделать или куда копать.
 
Ссылка на проблему
https://sport-print.online/sample-page/

tuxfighter

Гуру
Местный
попробуйте
CSS:
 .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%;
}
 
  • Like
Реакции: D&B

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;
   }

}
 

tuxfighter

Гуру
Местный
что не работает то?
учитывая что у меня разрешение монитора 1280х1024 -))
а вообще вот эти повторяющиеся вещи
CSS:
width: 70px;
     height: 30px;
     line-height: 20px;
     padding: 0 10px !important;
     padding-right: 20px !important;
     padding-bottom: 10px !important;
все время писать не нужно -))
 

Serg001

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

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;

   }

}
 

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

Гуру
Местный
не старайтесь казаться глупее, чем вы есть
Код:
<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

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