Как исправить проблему с центрированием и адаптивной шириной при помощи CSS / HTML - PullRequest
Новая
       19

Как исправить проблему с центрированием и адаптивной шириной при помощи CSS / HTML

0 голосов
/ 11 апреля 2019

Я создаю новую страницу и имею две проблемы:

1) Я хочу центрировать текст «Заполнить пробел в стипендии».Он отлично работает на Firefox, Chrome и iOS на iPhone.Тем не менее, iOS на iPad и в некоторых браузерах для настольных компьютеров, таких как Edge, не центрируются.

2) Когда я уменьшаю ширину на рабочем столе ниже 640 пикселей, кнопка «давать» выступает ниже логотипа и превращается в «Заполнить стипендию».Gap "text.

Я настроил медиазапросы специально для мобильных устройств / настольных ПК с обрезанием для уменьшения размера кнопки« Изображение / дать »при достижении определенной ширины, но это не решает проблему. 

.title {
display:block;
margin-top:30px;
width:100%;
}

.titletext {
margin-left:auto;
margin-right:auto;
text-align:center;
}


header ul a {
display:block;
background-color:#ae122a;
padding-right: 75px;
padding-left: 75px;
padding-top: 22px;
padding-bottom:22px;
margin-top:0;
float:right;
font-family: calibri, sans-serif;
font-weight: 400;
font-style: normal;
text-decoration: none;
color:white;
}


@media only screen
and (min-device-width : 320px)
and (max-device-width : 643px){ 
.headerimg {
        height: 180px;
    }
    header {
        height:100%;

    }
    header ul a {
        font-size: 100px;
    }

@media only screen
and (min-device-width: 643px) {
    header {
        height:110px;
    }
    header ul a {
        font-size:50px;
    }

от Title и Titletext, я ожидаю, что он будет центрирован на всех устройствах, но это не так.

А для полосы данных, я ожидаю, что она уменьшится до меньшего размера на 643px, ноэто тоже не так.

...