Disclaimer: This website is my first attempt at development, so I tend to make minor errors that can be hard to catch. The sidebar and submit button remain intact, but the checkboxes and their labels disappear when the screen size is reduced below a certain threshold. It seems like the font-size might be causing this issue because shrinking the text reveals the missing content.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
html, body, h1 {
font-family: 'Poppins', sans-serif;
color: #222;
}
h1{
font-weight: 2000;
font-stretch: expanded;
font-size:2em;
}
a:link, a:visited{
color: white;
}
a:hover{
color: green;
}
.navbar {
padding: .8rem;
}
.navbar-nav li{
padding-right: 20px
}
.nav-link{
font-size: 1.1rem !important;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top:49%;
transform: translateY(-95%);
}
.carousel-caption h6{
color: white;
background-color: rgba(150, 100, 150, 0.5); /* 50% transparent */
font-family: sans-serif;
font-weight: 1000;
border-radius: 25px;
padding: 5px;
}
.sidenav{
width: 150px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 75px;
padding-top: 5px;
background-color: rgba(50,50,50, 0.5); /* 50% transparent */
}
.carousel-caption h2{
font-family: sans-serif;
color: black;
font-weight: 500
}
.btn-primary{
background-color: #6648b1;
border: 1px solid #6648b1;
}
.row{
margin-top: 20px;
margin-left: 400px;
padding: 10px;
}
.brn-primary:hover{
background-color: #563d7c;
border: 1px solid #563d7c;
}
.jumbotron {
padding: 1rem;
border-radius: 0;
}
.padding {
padding-bottom: 2rem;
}
.welcome {
width: 75%;
margin: 0 auto;
padding-top: 2rem;
}
.welcome hr{
border-top: 2px solid #b4b4b4;
width:95%;
margin-top: .3rem;
margin-bottom: 1rem;
}
.fa-facebook, .fa-instagram, .fa-youtube{
font-size: 2em;
margin: 1rem;
}
.fa-facebook{
color: white;
}
.fa-instagram{
color: grey;
}
.fa-youtube{
color: red;
}
.social a{
font-size: 4.5em;
padding: 3rem;
}
/* screen size xs */
@media (min-width: 1px) and (max-width: 499px){
...