How to expand the white background, When I click on the plus image?
HTML: <div class="container">
<div class="flex">
<img src = "icon-star.svg">
<h1>FAQs</h1>
</div>
<div class="faq">
<div class="questions">
<div class="question1">
<span> What is Frontend Mentor, and how will it help me?</span>
<img class="plus-img" src="icon-plus.svg" alt="Expand">
<img class="minus-img hidden" src="icon-minus.svg">
</div>
<div class="answer hidden" > <p> Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.</p> </div> </div>
<div class="questions"> <div class="question2"> <span> Is Frontend Mentor free?</span> <img class="plus-img" src="icon-plus.svg" alt="Expand"> <img class="minus-img hidden" src="icon-minus.svg"> </div>
<div class="answer hidden"> <p>Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.</p> </div> </div>
<div class="answer hidden" > <p> Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.</p> </div> </div>
<div class="questions"> <div class="question2"> <span> Is Frontend Mentor free?</span> <img class="plus-img" src="icon-plus.svg" alt="Expand"> <img class="minus-img hidden" src="icon-minus.svg"> </div>
<div class="answer hidden"> <p>Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.</p> </div> </div>
3 Replies
<div class="questions">
<div class="question3">
<span>Can I use Frontend Mentor projects in my portfolio?</span>
<img class="plus-img" src="icon-plus.svg" alt="Expand">
<img class="minus-img hidden" src="icon-minus.svg">
</div>
<div class="answer hidden"> <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!</p> </div> </div> <div class="questions"> <div class="question4"> <span>How can I get help if I'm stuck on a Frontend Mentor challenge?</span> <img class="plus-img" src="icon-plus.svg" alt="Expand"> <img class="minus-img hidden" src="icon-minus.svg"> </div>
<div class="answer hidden"> <p>The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.</p> </div> </div> </div> </div> CSS: @import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap'); *{ margin:0; padding:0; box-sizing: border-box; } body{ height:100vh; justify-content: center; align-items: center; display: flex; font-family: 'Work Sans', sans-serif; background-image: url(background-pattern-desktop.svg); background-repeat: no-repeat; background-size: contain; background-color: hsl(275, 100%, 97%); } .container{ justify-content: center; align-items: center; box-sizing: border-box; width:650px; height:300px; background-color: white; padding:30px; border-radius: 10px; box-shadow: 0px 0px 10px -5px; transition: height 0.3s ease-in-out; } .faq{ transform: translateY(30px); } .plus-img{ margin-left:auto; } .minus-img{ margin-left:auto; } .flex{ display:flex; gap:1rem; } .flex img{ width:30px; height:30px; transform: translateY(10px); } .flex h1{ font-size: 2.5rem; font-weight:900; display:flex; } .question1, .question2, .question3, .question4{ font-weight: 700; font-size: .9rem; display:flex; } .questions p{ font-size:0.8rem; width:100%; margin-bottom:1rem; color:hsl(292, 16%, 49%); } .questions .question1, .questions .question2, .questions .question3, .questions .question4 { margin-bottom: 1rem; } .questions img{ cursor: pointer; } .questions span:hover{ color:hsl(292, 86%, 48%); cursor: pointer; } .hidden{ display:none; } Also, sorry for the long code. I try to use codepen, but it doesn't show the image.
<div class="answer hidden"> <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!</p> </div> </div> <div class="questions"> <div class="question4"> <span>How can I get help if I'm stuck on a Frontend Mentor challenge?</span> <img class="plus-img" src="icon-plus.svg" alt="Expand"> <img class="minus-img hidden" src="icon-minus.svg"> </div>
<div class="answer hidden"> <p>The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.</p> </div> </div> </div> </div> CSS: @import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap'); *{ margin:0; padding:0; box-sizing: border-box; } body{ height:100vh; justify-content: center; align-items: center; display: flex; font-family: 'Work Sans', sans-serif; background-image: url(background-pattern-desktop.svg); background-repeat: no-repeat; background-size: contain; background-color: hsl(275, 100%, 97%); } .container{ justify-content: center; align-items: center; box-sizing: border-box; width:650px; height:300px; background-color: white; padding:30px; border-radius: 10px; box-shadow: 0px 0px 10px -5px; transition: height 0.3s ease-in-out; } .faq{ transform: translateY(30px); } .plus-img{ margin-left:auto; } .minus-img{ margin-left:auto; } .flex{ display:flex; gap:1rem; } .flex img{ width:30px; height:30px; transform: translateY(10px); } .flex h1{ font-size: 2.5rem; font-weight:900; display:flex; } .question1, .question2, .question3, .question4{ font-weight: 700; font-size: .9rem; display:flex; } .questions p{ font-size:0.8rem; width:100%; margin-bottom:1rem; color:hsl(292, 16%, 49%); } .questions .question1, .questions .question2, .questions .question3, .questions .question4 { margin-bottom: 1rem; } .questions img{ cursor: pointer; } .questions span:hover{ color:hsl(292, 86%, 48%); cursor: pointer; } .hidden{ display:none; } Also, sorry for the long code. I try to use codepen, but it doesn't show the image.
In .container class the height: is set to 300px, and the questions overflow, and are clipped.
If you try height: auto, the
.container div should expand to fit all contents.
Thanks, it works!