Here is the updated content:
Replace the existing code with the following:
<table class="table table-sm table-borderless d-flex justify-content-end">
...
</table>
Additionally, include min-width: 215px; to the
<input class="form-control" type="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe5eeece4fce0e1d0f8eee1e8cfe8e2eee6e3a1ece0e2">[email protected]</a>">
.
Refer to the snippet below for visualization.
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');
* {
margin: 0;
padding: 0;
scroll-padding-top: 70px;
scroll-behavior: smooth;
}
main {
background: #FDFC47;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #e8fd88, #ffffff, #e8fd88);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #e8fd88, #ffffff, #e8fd88);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
header {
background: #56ab2f;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #a8e063, #56ab2f);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: fixed;
height: 80px;
right: 0;
left: 0;
z-index: 3;
}
.color {
margin: 5px;
border-radius: 10px;
font-family: 'Raleway', serif;
color: white;
}
/* Additional CSS Code */
@media only screen and (max-width: 575.98px) {
#collapseNav {
background: rgb(66, 172, 25, 0.7);
}
.color:hover {
background-color: white;
color: #2B7A0B;
}
.contact,
.subscription {
color: white;
font-family: 'Raleway', serif;
font-size: 13px;
margin-top: 10px;
}
}
#home {
margin-top: 70px;
}
.title {
grid-area: title;
justify-self: center;
align-self: center;
}
/* End of Updated CSS */