Как я могу помешать детям внутри родителя перекрывать друг друга по мере уменьшения ширины экрана? ⇐ CSS

[Anonymous]

У меня есть заголовок, который содержит 2 div. < /li>
< /ol>
div 1 (.hero-content) содержит некоторые тексты для печати (.homePageBannerText), немного статического текста (.home-hero-p) и кнопка CTA (.cta-ktton).
div 2 содержит изображение.
Когда ширина экрана превышает 606px, Div1 и Div2 сидят в строке, бок о бок, с детьми Div 1, сложенными в столбце. < /p>
Когда экран Ширина

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

document.addEventListener("DOMContentLoaded", function() {
const heroImage = document.querySelector(".hero-image");
const heroContent = document.querySelector(".hero-content");
const hero = document.querySelector(".hero");

if (!heroImage || !heroContent || !hero) return; // Prevents errors

// Store the original parent and next sibling
const originalParent = heroImage.parentElement;
const originalNextSibling = heroImage.nextElementSibling;

function moveHeroImage() {
if (window.innerWidth 
.hero {
background-color: #000000;
/* Black Background */
color: #FFFFFF;
/* White Text */
max-height: 90vh;
/* Full Viewport Height */
display: flex;
align-items: center;
justify-content: flex-start;
/* Keep content aligned to the left */
padding-left: 15%;
/* Adjust padding to nudge content to the right */
}

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

/* Headline Styling */
.hero-content h1 {
font-size: 3rem;
max-width: 100%;
white-space: nowrap;
margin-bottom: 25px;
/* Adjust spacing below the headline */
color: #FDE07A;
/* Yellow Accent */
}

/* Subheadline Styling */
.hero-content p {
font-size: 1.2rem;
margin-bottom: 20px;
/* Match the spacing of h1 */
color: #FFFFFF;
}

/* Call-to-Action Button */
.cta-button {
display: inline-block;
background-color: #FDE07A;
/* Yellow Button */
color: #4A4A4A;
/* Brownish Text */
padding: 10px 25px;
/* Slightly wider for balance */
text-decoration: none;
border-radius: 25px;
/* Increased to create a pill-like shape */
border-color: transparent;
font-weight: bold;
transition: background-color 0.3s ease;
margin-top: 20px;
/* Add spacing above the button */
}

/* Hero Section */
.hero {
background-color: #000000;
/* Black Background */
color: #FFFFFF;
/* White Text */
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 Block */
.hero-content {
max-width: 40%;
/* Constrain the width of the text */
text-align: left;
z-index: 2;
/* Ensure content stays above background elements */
}

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

}

.hero-image img {
width: 500px;
/* Maintain image aspect ratio */
max-height: 500px;
/* Adjust image height */
display: block;
/* Prevent extra spacing below the image */
}

/* Typing Effect */
.typing-effect {
display: inline;
color: #FDE07A;
/* Yellow Accent */
font-size: 3rem;
/* Keep the original size */
font-weight: bold;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid transparent;
/* Used for alignment */
}

@media screen and (max-width: 606px) {

.hero-content {
display: grid !important;
grid-template-columns: 1fr;
/* Forces all children into a single column */
grid-auto-rows: auto;
/* Ensures each child gets its own space */
gap: 2vh;
/* Adds spacing between children */
width: 100%;
height: auto;
/* Ensures container grows dynamically */
}

.typing-effect {
font-size: 23vw;
/* Scale text dynamically */
line-height: 1.1;
max-width: 100vw;
width: auto;
white-space: normal;
/* Ensures proper line breaks */

}

.cursor2 {
font-size: 23vw;
width: 20px;
margin-left: 10px;
}

.home-cta {
width:  50%;
}

}< /code>







Hello world.
[url=signuppage.html]Start Earning[/url]

[img]images/Builder-no-bg3.png[/img]

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