playlist-responsiveness.css

/* these are all the media queries for " playlist-page.html" page with the desktop first approach*/
@media screen and (max-width: 1200px) {
	/* favourtes will be hidden */
	.fav {
		display: none !important;
	}
	/* reduced size of search bar */
	.search-bar {
		width: 30%;
	}
	input {
		font-size: 11px !important;
	}
	.song-name-main h1 {
		font-size: 2.4vw;
	}
	.desc {
		font-size: 1.2vw;
	}
}
@media screen and (max-width: 900px) {
	/* jumbotron description */
	.desc {
		font-size: 1.6vw;
	}
	/* more button vil ve visible and section 2 will be hidden by default for this viewport */
	label {
		display: block;
	}
	/* hidden section 2 by default */
	.section-2 {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		width: 300px;
		height: 68vh;
		background-color: #050043;
		box-shadow: 0px 0px 2px 1px white;
		right: 0px;
		top: 23.5%;
		overflow: scroll;
		padding-left:10px;
		z-index: 5;
		padding-right:5px;
		transition:visibility ease-in-out 0.3s;
		transition: opacity ease-in-out 0.3s;
	}
	/* more button */
	input[type="checkbox"]:checked ~ .section-2 {
		visibility: visible;
		opacity: 1;
	}
	.list {
		overflow: hidden;
		height: auto;
	}
	.list-item {
		background-color: #1a1e33;
	}
	/* hide section 2 scrollbar */
	.section-2::-webkit-scrollbar {
		display: none;
	}
	/* when the section 2 is hidden, section-1 width becomes 100% to cover the whole page */
	.section-1 {
		width: 100%;
	}
	/* jumbotron */
	.jumbotron {
		height: 30vw;
	}
	/* image in the jumbotron */
	.jumbotron-image {
		height: 30vw;
		width: 30vw;
	}
	/* buttons and all */
	.action-part p {
		font-size: 2vw;
	}
	.btns > button {
		height: 4vw;
		width: 11vw;
		font-size: 1.7vw;
	}
}
@media screen and (max-width: 700px) {
	/* in the screens of this width, generally volume buttons are provided at the side. */
	/* so there is no need for the volume slider at this width. so i have removed them from the display */
	/* followers and author */
	.followers,
	.author {
		font-size: 2vw;
	}
	/* jumbotron description */
	.desc {
		font-size: 1.8vw;
	}
	/* extra icons in the footer at the right hand side */
	.extras > div:nth-child(3) {
		display: none;
	}
	.extras > div:nth-child(4) {
		display: none;
	}
}
@media screen and (max-width: 550px) {
	/* this is the most important media query */
	/* navigation bar section */
	/* website image */
	.website-logo img {
		height: 30px;
		width: 30px;
	}
	/* website name */
	.website-name h1 {
		font-size: 3vw;
	}
	/* website name */
	.website-name h4 {
		font-size: 2vw;
	}
	/* notification bell */
	.notification-bell img {
		width: 20px;
		height: 20px;
	}
	/* profile picture */
	.profile-picture img {
		width: 30px;
		height: 30px;
	}
	/* notification bell and profile picture */
	.notification-bell,
	.profile-picture {
		margin-top: 8px;
	}
	.song-name-main h1 {
		font-size: 3vw;
	}
	/* followers and author */
	.followers,
	.author {
		font-size: 3vw;
	}
	/* jumbotron description */
	.desc {
		font-size: 3vw;
		padding-left: 4px;
	}
	/* buttons and all in the jumbotron */
	.action-part {
		padding-top: 0px;
	}
	/* jumbotron */
	.jumbotron {
		height: 60vw;
		text-align: justify;
	}
	/* image in the jumbotron */
	.jumbotron-image {
		height: 60vw;
		width: 60vw;
	}
	/* buttons and stuff */
	.btns > button {
		height: 8vw;
		width: 17vw;
		font-size: 3.2vw;
	}
	/* this is the image in the footer section of the page. due to less space, it has to be removed at such lower resolutions. */
	/* there is another option, but it will look messy and small */
	#song-image {
		display: none;
	}
}