Re размер заголовка при изменении размера окна

Question

Ниже мой код, который отлично работает, когда окно в полном размере. Но при размере окна, логотип и заголовок отображаются неправильно. Here is my code Нужно ли мне менять CSS или использовать то же самое с помощью bootstrap. Я попытался изменить значения, указанные в пикселях, на проценты. Тем не менее это не сработало.

<div class='header'> 
    <img style='position:absolute;margin: 12px 10px;' src='https://business.microsoft.com/-/media/mssc/footericons/xbox.ashx?h=52&la=en&w=52&hash=94B5BB82970A4CF66DBE9F0D78B7E10EBD2D9A5B'/> 
    <h1 class="heading">My page</h1> 
</div> 

Answer 1

Рекомендуется поместить весь свой код CSS в отдельный файл.

Можно поместить изображение внутри тега H1, оно может быть в порядке с логотипом. Вы бы начать с этого:

.heading { 
    display: inline; 
} 

Но, если вы просто хотите, чтобы сделать содержание структурировано и сделать его пребывание вместе ... добавить минимальную ширину, например:

.navContent{ 
min-width: 400px; 
} 

Answer 2

Вы можете использовать ниже отзывчивого css, чтобы он позволял изменять размер окна до ширины 992px. для этого использовать ниже код, чтобы сделать его отзывчивым

/* responsive css start */ 
@media (min-width:992px){ 
.heading{ text-align: center;} 
.navContent{text-align: left;float: left; padding-left:0px; padding-right: 15px; position: relative;} 
/* responsive css end */ 

Я прилагаю скриншот для справки, в котором вы можете увидеть это не перекрывается контент заголовка. Но его максимальный предел ширины ограничен 992px. вы можете изменить его согласно вашему требованию.