Поддержка Проблемы и решения Стили виджетов

  • Здравствуйте. Прошу помощи с виджетами для категорий. Никак не могу в стилях прописать что бы кнопки были на одном уровне ( 6 виджетов на главной странице )
    1,2 и 6 тую кнопку нужно подогнать как 3-4-5..Буду благодарен за подсказку

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 4 ответов — с 1 по 4 (всего 4)
  • .promo-product1 aside:nth-child(1) .caption{
    	margin-top: 185px;	
    	left: -10px;
    }

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

    на на мобильной версии все теряется и сдвигается

    почитайте про медиа запросы css

    Не очень понимаю, сами виджеты вроде как флекс боксами … но из за того что надписи сдвинул

    .promo-product1 aside:nth-child(1) .caption{
    	margin-top: 183px;	
    	left: -10px;
    }
    
    .promo-product1 aside:nth-child(2) .caption{
    	margin-top: 148px;	
    	left: -10px;
    }
    
    .promo-product1 aside:nth-child(3) .caption{	
    	left: -10px;
    }
    
    .promo-product1 aside:nth-child(4) .caption{	
    	left: -10px;
    }
    
    .promo-product1 aside:nth-child(5) .caption{	
    	left: -10px;
    }
    
    .promo-product1 aside:nth-child(6) .caption{	
    	left: -160px;
    	margin-top: 123px;
    	white-space: pre;	
    }

    На мобильной версии все сдвинулось

    Модератор Denis Yanchevskiy

    (@denisco)

    WordPress-разработчик, denisco.pro

    На мобильной версии все сдвинулось

    Вот медиазапросы (которые Вам и посоветовал kw56) и помогают разделить css-стили для разных разрешений.

    Выберите какое-нибудь руководство из гугла, например, это и ознакомьтесь.

    Должно получиться что-то типа:

    @media (min-width: 768px) {
    	.promo-product1 aside:nth-child(1) .caption{
    		margin-top: 183px;	
    		left: -10px;
    	}
    
    	.promo-product1 aside:nth-child(2) .caption{
    		margin-top: 148px;	
    		left: -10px;
    	}
    
    	.promo-product1 aside:nth-child(3) .caption{	
    		left: -10px;
    	}
    
    	.promo-product1 aside:nth-child(4) .caption{	
    		left: -10px;
    	}
    
    	.promo-product1 aside:nth-child(5) .caption{	
    		left: -10px;
    	}
    
    	.promo-product1 aside:nth-child(6) .caption{	
    		left: -160px;
    		margin-top: 123px;
    		white-space: pre;	
    	}
    }
Просмотр 4 ответов — с 1 по 4 (всего 4)
  • Тема «Стили виджетов» закрыта для новых ответов.