Как я могу исправить размер моего контейнера, когда я уменьшаю ширину экрана? ⇐ CSS

[Anonymous]

У меня есть раздел героев, текстовый контейнер и контейнер изображения справа от этого подряд. Я добавляю медиа -запросы для отзывчивости. Когда ширина экрана уменьшается, и Navbar скользит, Media Запрос вступает в силу, чтобы заставить правый край контейнера изображения оставаться в соответствии с последним элементом в Navbar. Это прекрасно работает. Тем не менее, это также заставляет изображение сокращаться в размерах, что в данном конкретном случае я не хочу происходить. Я хочу, чтобы шкала оставалась фиксированной, и для того, чтобы изображение сдвинулось влево при уменьшении ширины экрана. < /P>

Код: Выделить всё

    .navbar {
display: flex;
align-items: center;
padding: 20px 10%;
background-color: #000000; /* Black Background */
color: #FFFFFF; /* White Text */
max-width: 100vw; /* Ensure it never exceeds the viewport width */
overflow: hidden; /* Prevent extra width */
}

.hero {
background-color: #000000; /* Black Background */
color: #FFFFFF; /* White Text */
max-height: 90vh; /* Full Viewport Height */
display: flex; /* Flexbox layout */
align-items: center; /* Center content vertically */
justify-content: flex-start; /* Align content to the left */
position: relative;
padding-left: 15%; /* Adjust spacing for left-aligned text */

}

.hero-content {
max-width: 100%; /* Constrain the width of the text */
text-align: left; /* Align text to the left */
margin-top: 20px;
}

/* Hero Image */
.hero-image {
position: relative;
left: 11.5%;
bottom: 2%;
z-index: 1; /* Place the image behind the text */

}

< /code>
    
logo
[list]
[*][url=index.html]Home[/url]
[*][url=about.html]About[/url]
[*][url=Products.html]Products[/url]
[*][url=signuppage.html]Sign Up[/url]
[*][url=contact.html]Contact[/url]
[/list]






Banner Text



Tagline

[url=signuppage.html]
CTA button
[/url]

[img]image URL[/img]

Подробнее здесь: https://stackoverflow.com/questions/794 ... the-screen