I have this element embedded in my Google Site. For the progress bar to be visible properly on the mobile site, I need to drag the container box to a huge size, scroll bars appear while viewing from a mobile device. But then it has huge white gaps on the desktop app.
function updateProgressBar(raisedAmount) {
const goalAmount = 50000;
const percentage = (raisedAmount / goalAmount) * 100;
const progressBar = document.querySelector(".progress-bar");
progressBar.style.width = percentage + "%";
const raisedAmountElement = document.querySelector(".raised-amount");
raisedAmountElement.textContent = "₹" + raisedAmount.toLocaleString("en-IN");
}
const initialRaisedAmount = 7698;
updateProgressBar(initialRaisedAmount);@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500');
.progress-bar {
float: left;
border-radius: 6px;
height: 20px;
background: linear-gradient(-90deg, #fdc700, #ffde66);
z-index: 1;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
margin-top: 1px;
}
.donation-info {
height: 80px;
/* Reduced height */
padding: 0px;
/* Adjusted padding */
font: 500 20px/1 'Open Sans';
display: flex;
align-items: center;
}
.goal-amount {
display: block;
float: right;
font-weight: bold;
height: 5px;
}
@media only screen and (max-width: 540px) {
.goal-amount {
text-align: right;
}
.raised-info {
width: 10%;
text-align: left;
}
}
.progress-bar-wrap {
position: relative;
width: 100%;
height: 22px;
border-radius: 6px;
background: #dee0e0;
overflow: hidden;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
}
.update-text {
position: absolute;
bottom: 0;
right: 0;
font-size: 10px;
padding: 5px;
font-family: 'Open Sans';
/* Apply Open Sans font-family */
}
.raised-info {
width: 100%;
height: 5px;
padding: 0;
/* Removed padding */
float: left;
}
.raised-amount,
.raised-label {
display: block;
font-size: 20px;
float: left;
margin-right: 10px;
}
.raised-amount {
font-weight: bold;
}
.goal-words {
font-size: 20px;
margin-right: 10px;
height: 5px;
}<!DOCTYPE html>
<html>
<head>
<title>Donation Progress Bar</title>
</head>
<body>
<div class="donation-info">
<div class="raised-info">
<span class="raised-label">RAISED</span>
<span class="raised-amount" id="raised-amount">₹5000</span>
</div>
<div class="goal-words">GOAL</div>
<div class="goal-amount">₹50,000</div>
</div>
<div class="progress-bar-wrap">
<div class="progress-bar"></div>
<div class="update-text">This number is updated every 24hrs</div>
</div>
</body>
</html>I have tried tinkering around the padding and container heights, but I have no idea how to fix it. Help is appreciated.