mobile view for the search page

src/Pages/CSS/search.css

@@ -72,24 +72,24 @@ body {
 }
 
 .form-control {
-  padding-top: 0; /* Adjust as needed */
+  padding-top: 0; 
 }
 
 .form-label {
   position: absolute;
   top: 0;
   left: 0;
-  padding: 0.7vh 0.5vw; /* Adjust as needed */
+  padding: 0.7vh 0.5vw; 
   pointer-events: none;
   transition: all 0.2s ease-out;
-  color: #000000; /* Bootstrap text color for placeholder */
+  color: #000000; 
 }
 
 .form-control:focus + .form-label,
 .form-control:not(:placeholder-shown) + .form-label {
   transform: translateY(-100%);
-  font-size: 0.75rem; /* Adjust as needed */
-  color: #495057; /* Bootstrap text color for active input */
+  font-size: 0.7vw; 
+  color: black; 
 }
 
 
@@ -144,6 +144,17 @@ li > a > img:active {
 	border: 5px solid white;
 }
 
+li > div.search-album-details {
+	align-self: flex-start;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	height: 7vw;
+	color: black;
+}
+
 .search-artist {
 	text-decoration: none;
 	font-weight: bold;

src/Pages/CSS/search_mobile.css

@@ -0,0 +1,73 @@
+@media screen and (max-width: 600px) {
+	.Header {
+		z-index: 1;
+	}
+
+
+	#search-bar {
+		width: 58vw;
+		height: 11vw;
+		font-size: 3.33vw;
+		padding-left: 3vw;
+	}
+
+	.search > button {
+		height: 11vw;
+		width: 27vw;
+		font-size: 3.33vw;
+	}
+
+	.form-label {
+		padding: 3vw 3vw;
+	}
+
+	.form-control:focus + .form-label,
+	.form-control:not(:placeholder-shown) + .form-label {
+		transform: translateY(-75%);
+		font-size: 2.5vw; 
+	}
+
+	/*****************************/
+	li {
+		width: 85vw;
+
+		padding: 3vw;
+
+		font-size: 3vw;
+	}
+
+	li > a > img {
+		width: 20vw;
+		height: 20vw;
+		border-radius: 1vw;
+
+	}
+
+	li > a > img:hover {
+		width: 20vw;
+		height: 20vw;
+	}
+
+	.search-artist, .search-song-details  {
+		max-width: 30vw;
+
+	}
+
+	.search-actions {
+		display: flex;
+		flex-direction: column;
+
+		right: 4vw;
+	}
+
+	.search-actions > button {
+		height: 7vw;
+		width: 17.5vw;
+		border-radius: 1.11vw;
+
+
+	}
+
+
+	/*****************************/
+}

src/Pages/Search.jsx

@@ -21,6 +21,7 @@ import SearchTerm from "../Components/SearchTerm"
 import Player from "../Components/Player"
 
 import './CSS/search.css'
+import "./CSS/search_mobile.css"
 
 import "./CSS/album.css?inline"
 import "./CSS/profile.css?inline"
@@ -184,7 +185,7 @@ export default function Search(){
 
 		<main>
 			<div>
-				
+
 			</div>
 			<ul className="results">
 				{ searchResults.length == 0 ? "No Songs Here" : searchResults.map((song, index)=> {
@@ -201,10 +202,14 @@ export default function Search(){
 								/>
 							</Link>
 
-							<Link className="search-artist" to={"/artist/" + song.artistId}>{song.artistName} -</Link>
-
-							<p className="search-song-details">{song.trackName} - {song.releaseDate.split('-')[0]}</p>
+							<div className="search-album-details">
+								<Link className="search-artist" to={"/artist/" + song.artistId}>{song.artistName}</Link>
 
+								<p className="search-song-details">{song.trackName}</p>
+								<p> { song.releaseDate.split('-')[0] } </p>
+							</div>
+
+
 
 							<div className="search-actions ">
 								<button id={index} className="play-music-search" onClick={playMusic}> Play </button>