I am trying to have the text in my project fit and justify accordingly when the dimensions of the screen smaller. So the text does not wrap for some reason even if I have it in the code.
I tried to input all the html classes I need to have the changes applied to in teh media query and have it be applied when the width of the screen goes lower but it does not work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="globals.css" />
</head>
<body>
<div class="banner">
<div class="text">
<img class="vector" id="vctr" src="Imagery/vector--2nd.png" />
<div class="frame">
<div class="title-with-icon">
<img
id="img--green--thunder"
class="bolt-lightning"
src="Imagery/green--thunder.png"
style="width: 21px; height: 28px; margin-left: 16.5px"
/>
<p class="text-wrapper">10% Отстъпка за първата ви поръчка</p>
</div>
<p class="div">
Get a complimentary 10% discount on your car insurance. Become a
Trusti member and take advantage of this temporary offer!
</p>
</div>
<div class="text-button">
<button class="CTA">Научи повече</button>
<div class="icon" style="bottom: 24px">
<img src="Imagery/Icon.png" />
</div>
</div>
</div>
<div class="mediaElements">
<img class="star" src="Imagery/entire--star.png" />
<img class="image" src="Imagery/group--component.png" />
</div>
</div>
</body>
</html>
.banner {
display: flex;
align-items: center;
gap: var(--tokens-spacing-horizontal-horizontal-space-lg);
background-color: var(--neutralshade-400-white);
overflow: hidden;
border: 1px solid;
border-color: #009147;
width: 100%;
min-height: 162px;
max-width: 1204px;
border-radius: 16px;
justify-content: space-between; /*bzh addition*/
flex-wrap: wrap; /*bzh addition*/
}
.banner .mediaElements {
position: relative;
min-width: 452px;
height: 162px;
}
#img--green--thunder {
margin-left: 16.5px;
margin-top: 24px;
}
#vctr {
position: absolute;
overflow: hidden;
width: 636px;
height: 162px;
left: 99.5px;
top: 0;
left: 0;
}
.banner .star {
position: absolute;
width: 383px;
height: 383px;
top: -90px;
left: 38px;
}
.banner .title-with-icon {
display: flex;
}
.banner .text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
position: relative;
flex: 0 0 auto;
}
.banner .frame {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.banner .text-wrapper {
position: relative;
align-self: stretch;
margin-top: -1px;
font-family: "Nunito Sans";
font-weight: var(--desktop-h4-bold-font-weight);
color: var(--neutralshade-900-text);
letter-spacing: var(--desktop-h4-bold-letter-spacing);
line-height: var(--desktop-h4-bold-line-height);
left: 10.5px;
top: 24px;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px;
}
.banner .div {
position: relative;
justify-content: space-between;
display: flex;
flex-direction: wrap;
width: 513px;
font-family: "Open Sans";
font-weight: var(--global-body-small-font-weight);
color: var(--neutralshade-900-text);
font-size: var(--global-body-small-font-size);
letter-spacing: var(--global-body-small-letter-spacing);
line-height: var(--global-body-small-line-height);
font-style: var(--global-body-small-font-style);
left: 48px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
bottom: 16px;
}
.banner .text-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--collection-1-0-5-rem-duplicate);
position: relative;
flex: 0 0 auto;
}
.banner .CTA {
all: unset;
box-sizing: border-box;
position: relative;
width: fit-content;
margin-top: -1px;
font-family: var(--global-label-font-family);
font-weight: var(--global-label-font-weight);
color: var(--shadesshade-900-black);
font-size: var(--global-label-font-size);
text-align: center;
letter-spacing: var(--global-label-letter-spacing);
line-height: var(--global-label-line-height);
white-space: nowrap;
font-style: var(--global-label-font-style);
left: 48px;
bottom: 24px;
}
.banner .icon {
position: relative;
width: fit-content;
font-weight: 400;
color: var(--orangeorange-800-primary);
font-size: 16px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;
left: 54px;
}
.banner .image {
position: absolute;
width: 362px;
height: 162px;
top: 0;
left: 90px;
object-fit: cover;
}
@media screen and (max-width: 900px) and (min-width: 327px) {
.banner {
min-width: auto;
justify-content: center;
}
.banner.text {
justify-content: justify;
text-align: left;
flex-wrap: wrap;
overflow-wrap: break-word;
}
#vctr {
display: none;
overflow: hidden;
}
}