I've been struggling to make the background of my FAQ section on the website responsive. It doesn't seem to adapt well to different screen sizes.
html {
height: 100vh;
width: 100vw;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('https://wallpapers.com/images/featured/1920-x-1080-night-city-y13hx1qucv0ztepv.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
text-align: center;
font-weight: 600;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
min-height: 40%;
max-width: 60%;
border: 1px solid black;
border-radius: 3%;
background-color: white;
padding: 0 10px 10px 10px;
}
.question {
font-size: 1.1rem;
padding: 0 0 15px 0;
border-bottom: 2px solid black;
cursor: pointer;
}
.question::after {
content: "+";
font-size: 1.4rem;
position: absolute;
right: 10px;
}
.answer {
overflow: hidden;
height: 0;
transition: all 0.5s ease-in;
}
.question-container.active .answer {
height: 40px;
}
.question-container.active .question {
font-size: 1rem;
transition: all 0.5s ease-in;
}
.question-container .active .question::after {
content: "-";
transition: all 0.5s ease-in;
}<div class="container">
<h2>Frequently Asked Questions</h2>
<div class="question-container">
<p class="question">What is the return policy?</p>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
</div>
<div class="question-container">
<p class="question">When will I receive my order?</p>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
</div>
<div class="question-container">
<p class="question">Where are you located?</p>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
</div>
</div>Difficulty:
The challenge lies in making the background of the FAQ section responsive.
- I've attempted using max-width, min-height, and percentages, but it hasn't resolved the issue of layout adjustment across various screen sizes.
- The content either spills over or appears congested on smaller screens.
Attempts Made:
Implemented max-width and min-height for the container.
Set dimensions as percentages.
Incorporated media queries to modify styles based on different screen sizes.
Objective: I aim for the FAQ section to seamlessly adapt to diverse screen sizes, without any overflow or cramped appearance.
If anyone can assist me in identifying the reason why the UI background fails to respond and propose enhancements, it would be greatly appreciated.
Displayed below are screenshots depicting the section's appearance at 1440px, 1024px, and 425px respectively.
https://i.sstatic.net/KcJMZyGy.png