Кнопки реагируют на фоновое изображение - PullRequest
Новая
       73

Кнопки реагируют на фоновое изображение

0 голосов
/ 01 мая 2020

сейчас я работаю в Magento 2. У меня проблема с тем, что фоновое изображение с кнопками не остается прежним, когда я изменяю размер в Google chrome. 

.botones1 {
    position: absolute;
    left: 400px;
    font-size: 22px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: #357b2b !important;
}

.botones1:hover {
    background-color: #9FCD4C !important;
}

.botones2{
    position: absolute;
    left: 796px;
    font-size: 22px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: #357b2b !important;
}

.botones2:hover {
    background-color: #9FCD4C !important;
}
<div class="container">
    <img src="https://placeimg.com/1000/480/any" alt="Smiley face">
        <a class="button botones1" href="#">Buy Coupon</a> 
        <a class="button botones2" href="#">Sell Coupon</a>
</div>

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

Спасибо.

1 Ответ

0 голосов
/ 01 мая 2020

Если вы хотите, чтобы ваша страница была адаптивной, вы должны использовать Flexbox & Grid, чтобы позиционировать ваши элементы вместо пикселей, b c они будут сильно ограничивать вас. Вы можете попробовать использовать display: flex для <div> и расположить свои элементы в контейнере flex (попробуйте поиграть с инспектором).

Вот несколько полезных вещей о flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Сетка: https://css-tricks.com/snippets/css/complete-guide-grid/

...