A Pen by Doug Willis on CodePen.
Created
September 16, 2019 01:12
-
-
Save freo1995/c37df4967cf02fc6f1c7f263a74f9bb7 to your computer and use it in GitHub Desktop.
Compare Checklist Customised
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="content mb-4"> | |
<!-- Start Heading --> | |
<div class="heading mt-4 mb-4"> | |
<div class="title">Compare Us</div> | |
<div class="subtitle">to your current property manager…</div> | |
</div> | |
<!-- End Heading --> | |
<!-- Start Question Container --> | |
<div class="question-container"> | |
<div class="inner-content"> | |
<!-- Start Questions Heading --> | |
<div class="ques-heading d-flex"> | |
<div class="text pt-2"> | |
<p>Does your current property manager...</p> | |
</div> | |
<div class="check-container text-center"> | |
<p>Your current Property Manager</p> | |
<div class="icons d-flex mt-2"> | |
<div class="icon check"><i class="fas fa-check"></i></div> | |
<div class="icon question"><i class="fas fa-question"></i></div> | |
<div class="icon cancel"><i class="fas fa-times"></i></div> | |
</div> | |
</div> | |
<div class="check-default text-center"> | |
<p>Coral Sea Property</p> | |
</div> | |
</div> | |
<!-- End Questions Heading --> | |
<!-- Start Questions Content --> | |
<div class="ques-content"> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Guarantee personalised service and commit to care, communication and continual improvement?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Stand as owner advocates, working to maximise your annual returns?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Provide systemised, industry leading marketing to get your property leased sooner?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Respond to owner and tenant messages on the same day?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Structure your leases to end in the busiest periods of the real estate market? (lease ending November-January)</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Keep you updated with what is happening at your property, with progress and photos of maintenance jobs available online?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Employ a full-time specialised maintenance coordinator to qualify and coordinate maintenance requests.</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Have long term experience in the local property market and knows the average lease lengths, current vacancy rates, and annual average vacancy rates? – We also provide all of our success stats</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Use professional photographs and premier listings to promote your property on the internet?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Respect tenants as the lifeblood of the rental industry?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Provide an online 24/7 booking system for prospective tenants?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
<!-- Start Question --> | |
<div class="ques-row d-flex"> | |
<div class="text"> | |
<p>Only provide guided tenant inspections to allow us to begin to qualify potential tenant applicants and upsell the property ?</p> | |
</div> | |
<div class="check-container"> | |
<div class="icons d-flex"> | |
<div class="icon check text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-check"></i></span> | |
</label> | |
</div> | |
<div class="icon question text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-question"></i></span> | |
</label> | |
</div> | |
<div class="icon cancel text-center"> | |
<label class="sign-container"> | |
<input type="checkbox"> | |
<span class="sign-container-icon"><i class="fas fa-times"></i></span> | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div> | |
</div> | |
<!-- End Question --> | |
</div> | |
<!-- Start Questions Content --> | |
<!-- Start Questions Footer --> | |
<div class="ques-heading d-flex"> | |
<div class="text pt-2"></div> | |
<div class="check-container results text-center"> | |
<p>Get Results</p> | |
</div> | |
<div class="check-default text-center"></div> | |
</div> | |
<!-- End Questions Footer --> | |
</div> | |
</div> | |
<!-- End Question Container --> | |
<!-- Start Results Container --> | |
<div class="results-container"> | |
<div class="res-heading mt-4 mb-4"> | |
<p>You're currently receiving <span class="percentage"></span> of the service you would get at <strong>Coral Sea Property</strong>.</p> | |
</div> | |
<div class="res-content mb-4"> | |
<div class="subtitle mb-2">You are currently missing out on the following benefits:</div> | |
</div> | |
</div> | |
<!-- End Results Container --> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
let quesContent = document.querySelector('.ques-content'), | |
resultsBtn = document.querySelector('.results p'); | |
// Select on option from the checklist on click | |
quesContent.addEventListener('click', function(event) { | |
let ele = event.target; | |
if (ele.parentElement.tagName === 'LABEL' && ele.tagName === 'INPUT') { | |
let lbls = ele.parentElement.parentElement.parentElement.querySelectorAll('label'); | |
for (let i = 0; i < lbls.length; i++) { | |
if (lbls[i] !== ele.parentElement) { | |
if (lbls[i].classList.contains('active')) { | |
lbls[i].classList.remove('active'); | |
lbls[i].querySelector('input').checked = false; | |
} | |
} | |
} | |
if (ele.parentElement.classList.contains('active')) { | |
ele.checked = false; | |
ele.parentElement.classList.remove('active'); | |
} else { | |
ele.parentElement.classList.add('active'); | |
ele.checked = true; | |
} | |
} | |
}) | |
// Show Results on click on the 'Get Results' button | |
resultsBtn.addEventListener('click', function() { | |
let allQues = document.querySelectorAll('.ques-row'), | |
maxNum = 100 / allQues.length, | |
rightNum = 0, | |
arr = []; | |
for (let i = 0; i < allQues.length; i++) { | |
if (allQues[i].querySelector('label.active')) { | |
let lbls = allQues[i].querySelector('label.active'); | |
if (lbls.parentElement.classList.contains('check')) { | |
rightNum++; | |
} else { | |
let txt = allQues[i].querySelector('.text p').textContent; | |
arr.push(txt); | |
} | |
} else { | |
let txt = allQues[i].querySelector('.text p').textContent; | |
arr.push(txt); | |
} | |
} | |
rightNum = Math.ceil(rightNum * maxNum); | |
showResults(rightNum, arr) | |
}); | |
function showResults(res, txt) { | |
let quesContainer = document.querySelector('.question-container'), | |
overlay = document.createElement('div'), | |
spin = document.createElement('div'), | |
results = document.querySelector('.results-container'), | |
resContent = results.querySelector('.res-content'), | |
percentage = document.querySelector('.percentage'); | |
overlay.className = 'overlay'; | |
spin.className = 'spinner'; | |
quesContainer.appendChild(overlay); | |
quesContainer.appendChild(spin); | |
percentage.textContent = res + '%'; | |
if (txt.length === 0) { | |
resContent.style.display = 'none'; | |
} | |
for (let i = 0; i < txt.length; i++) { | |
let para = document.createElement('p'); | |
para.textContent = txt[i]; | |
resContent.appendChild(para); | |
} | |
setTimeout(function() { | |
overlay.remove(); | |
spin.remove(); | |
quesContainer.style.display = 'none'; | |
results.classList.add('active'); | |
}, 1200); | |
} | |
}()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* {box-sizing: border-box;} | |
.mt-2 {margin-top: 15px;} | |
.mb-2 {margin-bottom: 15px;} | |
.mt-4 {margin-top: 30px;} | |
.mb-4 {margin-bottom: 30px;} | |
.pt-2 {padding-top: 15px;} | |
p {margin: 0px; padding: 10px 0;} | |
.text-center {text-align: center;} | |
.d-flex {display: flex;} | |
body { | |
font-family: 'Open Sans', sans-serif; | |
font-weight: 400; | |
font-size: 15px; | |
padding: 0; | |
margin: 0; | |
} | |
.container { | |
max-width: 1170px; | |
width: 100%; | |
margin: 0 auto; | |
} | |
.container .content { | |
padding: 0 10px; | |
position: relative; | |
} | |
.title { | |
font-size: 40px; | |
font-weight: 700; | |
margin-bottom: 5px; | |
color: #662d91; | |
} | |
.subtitle { | |
font-size: 24px; | |
font-weight: 600; | |
} | |
.question-container { | |
position: relative; | |
border-top: 1px solid #ddd; | |
} | |
.question-container .overlay { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
width: 100%; | |
height: 100%; | |
opacity: .5; | |
background-color: #fff; | |
z-index: 999; | |
} | |
.question-container .spinner { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 60px; | |
height: 60px; | |
border-width: 8px; | |
border-style: solid; | |
border-radius: 100%; | |
border-color: #ddd #2d98f7 #ddd #ddd; | |
z-index: 99999; | |
animation: spinner .3s linear infinite; | |
} | |
@keyframes spinner { | |
0% {transform: rotate(0deg)} | |
100% {transform: rotate(360deg)} | |
} | |
.question-container .text { | |
flex: 0 0 65%; | |
width: 65%; | |
padding-left: 15px; | |
position: relative; | |
} | |
.question-container .ques-content .text { | |
display: flex; | |
align-items: center; | |
} | |
.question-container .ques-heading:last-child .check-container p::after, | |
.question-container .ques-content .text::after { | |
font-family: 'Font Awesome 5 Free'; | |
content: "\f0da"; | |
font-weight: 900; | |
visibility: hidden; | |
} | |
.question-container .text svg { | |
position: absolute; | |
left: 0; | |
top: 50%; | |
transform: translateY(-50%); | |
font-size: 18px; | |
color: #662d91; | |
} | |
.question-container .check-container { | |
flex: 0 0 20%; | |
width: 20%; | |
} | |
.question-container .check-default { | |
flex: 0 0 15%; | |
width: 15%; | |
} | |
.question-container .ques-heading .check-container { | |
padding: 0 15px 15px 25px; | |
border-right: 1px solid #ddd; | |
} | |
.question-container .ques-heading:last-child .check-container { | |
border-right-color: transparent; | |
} | |
.question-container .ques-heading:last-child .check-container p svg { | |
font-size: 18px; | |
margin-left: 5px; | |
margin-bottom: -2.5px; | |
} | |
.question-container .ques-heading .check-container p { | |
background-color: #458ae8; | |
border-bottom-left-radius: 15px; | |
border-bottom-right-radius: 15px; | |
color: #fff; | |
font-weight: bold; | |
padding: 5px 0; | |
font-size: 13px; | |
} | |
.question-container .ques-heading .check-default p { | |
font-weight: bold; | |
color: #662d91; | |
padding: 15px 5px 5px 15px; | |
text-align: left; | |
} | |
.question-container .icons .icon { | |
flex: 0 0 33%; | |
width: 33%; | |
padding: 5px; | |
font-size: 24px; | |
} | |
.ques-row .check-default, | |
.question-container .icon.check {color: #6EC067;} | |
.question-container .icon.question {color: #FAA61A;} | |
.question-container .icon.cancel {color: #EF413D;} | |
.ques-row .icon.check label.active {border-color: #6EC067;} | |
.ques-row .icon.question label.active {border-color: #FAAd16;} | |
.ques-row .icon.cancel label.active {border-color: #EF413D;} | |
.res-content p, | |
.text p { | |
color: #6d6d6d; | |
} | |
.ques-row .check-container { | |
border-right: 1px solid #ddd; | |
} | |
.ques-row label { | |
position: relative; | |
width: 42px; | |
height: 45px; | |
border: 1px solid #ddd; | |
border-radius: 10px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin: 0 auto; | |
cursor: pointer; | |
} | |
.ques-row label:hover { | |
border-color: #662d91; | |
} | |
.ques-row input { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 0px; | |
height: 0px; | |
opacity: 0; | |
cursor: pointer; | |
} | |
.ques-row .check-container { | |
padding: 0 15px 0 25px; | |
} | |
.ques-row .check-default { | |
font-size: 21px; | |
padding-top: 10px; | |
padding-left: 15px; | |
} | |
.ques-row .check-default span { | |
color: #662d91; | |
font-size: 17px; | |
display: inline-block; | |
margin-left: 4px; | |
} | |
.ques-row .check-default svg { | |
margin-bottom: -2px; | |
} | |
.ques-row .icon span { | |
display: none; | |
} | |
.ques-row .icon input:checked + span { | |
display: block; | |
} | |
.ques-row:last-child { | |
border-bottom: 1px solid #ddd; | |
} | |
.ques-row:last-child .check-container { | |
padding-bottom: 15px; | |
} | |
.question-container .ques-heading .check-container.results p { | |
cursor: pointer; | |
} | |
.results-container { | |
display: none; | |
padding-top: 20px; | |
} | |
.results-container.active { | |
display: block; | |
animation: show-results .3s ease-in-out; | |
} | |
@keyframes show-results { | |
0% {opacity: 0;transform: translateY(40px)} | |
100% {opacity: 1; transform: translateY(0px)} | |
} | |
.results-container .res-heading p { | |
text-align: center; | |
max-width: 727px; | |
font-size: 30px; | |
margin: 0 auto; | |
padding: 15px 20px 25px 15px; | |
border-radius: 30px; | |
background-color: #662d91; | |
color: #fff; | |
} | |
.results-container .res-heading p span { | |
font-weight: bold; | |
font-size: 50px; | |
line-height: 50px; | |
} | |
@media only screen and (max-width: 1100px) { | |
.question-container .check-default { | |
flex: 0 0 95px; | |
width: 95px; | |
} | |
.question-container .check-container { | |
flex: 0 0 200px; | |
width: 200px; | |
} | |
.question-container .text { | |
padding-right: 15px; | |
width: 100%; | |
flex: inherit; | |
} | |
} | |
@media only screen and (max-width: 590px) { | |
.ques-heading .text { | |
display: none; | |
} | |
.ques-row .check-container, | |
.question-container .ques-heading .check-container { | |
border-right: none; | |
} | |
.question-container .ques-content .text { | |
flex: 0 0 100%; | |
width: 100%; | |
} | |
.ques-row {flex-wrap: wrap;} | |
.question-container .text {padding-right: 0px;} | |
.results-container {padding-top: 0px;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment