Playground

src/Pages/Home/Home.css

@@ -9,6 +9,11 @@
   background-position-y: top;
 }
 
+.content {
+  max-width: 1000px;
+  margin: auto;
+}
+
 .p-home {
   width: 40rem;
   font-family: "Josefin Sans";

src/Pages/Home/Home.jsx

@@ -33,46 +33,51 @@ const Home = () => {
           <h2 className="h2-home">Recent Posts</h2>
         </div>
       </div>
-      <div>
-        <OnDutyHome />
-      </div>
-      {/* <div className="border-mid"></div> */}
-      <div className="div-p-btn">
-        <p className="p-home">
-          This platform was created for people to contribute helping stray dogs
-          who are in need of rescuing all across Lebanon region.
-        </p>
-        <Link to="/about">
-          <button className="btn-home">About Us</button>
-        </Link>
-      </div>
-      <div className="border-mid"></div>
-      <div className="logo-div-home">
-      <p className="label-logo">Visit Our OnDuty Page</p>
-        <img className="logo-home" src={logo} alt="logo" />
+      <div class="content">
+        <div>
+          <OnDutyHome />
+        </div>
+        <div className="div-p-btn">
+          <p className="p-home">
+            This platform was created for people to contribute helping stray
+            dogs who are in need of rescuing all across Lebanon region.
+          </p>
+          <Link to="/about">
+            <button className="btn-home">About Us</button>
+          </Link>
+        </div>
+        <div className="border-mid"></div>
+        <div className="logo-div-home">
+          <p className="label-logo">Visit Our OnDuty Page</p>
+          <img className="logo-home" src={logo} alt="logo" />
+          <br />
+          <Link to="/onduty">
+            <button className="btn-onduty-home">OnDuty</button>
+          </Link>
+        </div>
         <br />
-        <Link to="/onduty">
-          <button className="btn-onduty-home">OnDuty</button>
-        </Link>
-      </div>
-      <br />
 
-      <div className="border-mid"></div>
-      <div className="div-sos">
-        <label className="sos-label">
-          Looking for Somewhere To Adopt Or Directly Report A Case? <br /> Check
-          Out Our SOS Page Now!
-        </label>
-        <Link to="/sos">
-          <button className="btn-sos-homepage">SOS</button>
-        </Link>
+        <div className="border-mid"></div>
+        <div className="div-sos">
+          <label className="sos-label">
+            Looking for Somewhere To Adopt Or Directly Report A Case? <br />{" "}
+            Check Out Our SOS Page Now!
+          </label>
+          <Link to="/sos">
+            <button className="btn-sos-homepage">SOS</button>
+          </Link>
+        </div>
       </div>
       <div className="border-mid-"></div>
 
       <div className="contact-div-icon-home">
         <Link className="link-home-contact" to="/contact">
           <span className="span-home-contact"> Contact Us!</span>
-          <FontAwesomeIcon className="icon-home-email" icon={faEnvelopesBulk} size="2xl" />
+          <FontAwesomeIcon
+            className="icon-home-email"
+            icon={faEnvelopesBulk}
+            size="2xl"
+          />
         </Link>
       </div>
       <div className="border-mid-last"></div>

src/Pages/Posts/Posts.css

@@ -21,32 +21,37 @@
   text-align: center;
   padding: 10px;
 }
-.image-posts {
+.image-wrapper {
   width: 90%;
-  border-radius: 20px;
   height: 40vh;
-  /* position: relative; */
-  z-index: 1;
   display: flex;
   align-self: center;
+  position: relative;
+  justify-content: center;  
+}
+
+.image-posts {
+  width: 100%;
+  height: 40vh;
+  border-radius: 20px;
+  object-fit: cover;  
 }
 
 .description-posts {
+  position: absolute;
   font-size: small;
   line-height: 1.5;
-  text-align: center;
-  transform: translate(0, -190%);
-  z-index: 2;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   width: 300px;
   opacity: 0.9;
   height: 4vh;
   display: flex;
   justify-content: center;
-  align-self: center;
+  align-self: flex-end;
   color: white;
   padding: 10px;
+  margin-bottom: 20px;
 }
 
 .Posts-div {
@@ -57,7 +62,6 @@
 }
 
 .see-more-button {
-  z-index: 12;
   background: none;
   border: none;
   color: black;

src/Pages/Posts/Posts.jsx

@@ -153,29 +153,35 @@ const Posts = () => {
       <div className="Posts-div">
         <h1 className="h1-angels">Angels Protector</h1>
         {posts.map((post) => (
-          <div className="div-2" key={post._id}>
+          <div className="div-2 content" key={post._id}>
             <label className="label-posts">
               <CgProfile className="icon-profile" size={25} />
               {post.user.name}
             </label>
-            <img
-              className="image-posts"
-              src={post.images[0].url}
-              alt={post.image}
-            />
+            <div className="image-wrapper">
+              <img
+                className="image-posts"
+                src={post.images[0].url}
+                alt={post.image}
+              />
+              <div className="description-posts">
+                {showFullDescription
+                  ? post.description
+                  : truncateDescription(post.description, 10)}
+                {post.description.split(" ").length > 10 && (
+                  <button
+                    className="see-more-button"
+                    onClick={toggleDescription}
+                  >
+                    {showFullDescription ? "See Less" : "See More"}
+                  </button>
+                )}
+              </div>
+            </div>
+
             <span className="date-stamp">
               Posted On {format(new Date(post.timestamp), "yyyy-MM-dd")}
             </span>
-            <p className="description-posts">
-              {showFullDescription
-                ? post.description
-                : truncateDescription(post.description, 10)}
-              {post.description.split(" ").length > 10 && (
-                <button className="see-more-button" onClick={toggleDescription}>
-                  {showFullDescription ? "See Less" : "See More"}
-                </button>
-              )}
-            </p>
             {post.comments.length > 0 && (
               <h3
                 className="comments-word"

src/Pages/SOS/SOS.jsx

@@ -17,9 +17,10 @@ const SOS = () => {
   return (
     <div>
       <Nav />
-      <Search />
-      <div>
-      <br />
+      <div className="content">
+        <Search />
+
+        <br />
         <div className="accordion">
           <h2 className="h1-sos">List Of Ngo's</h2>
           <br />
@@ -32,7 +33,6 @@ const SOS = () => {
                 ) : (
                   <IoArrowRedoCircleOutline className="down-arrow" />
                 )}
-
               </div>
               <br />
               <div className={click === i ? "adress-sos.show" : "adress-sos"}>

src/components/Nav/Nav.css

@@ -86,9 +86,6 @@ Link{
   padding-right: 10px;
 }
 
-.hamburger {
-  z-index: 6;
-}
 .navigation pxul {
   display: none;
 }

src/components/SearchBar/Search.jsx

@@ -16,7 +16,9 @@ const Search = () => {
         setSearchResults([]);
         return;
       }
-      const response = await axios.get(`https://angelsprotectorss.onrender.com/api/ngo`);
+      const response = await axios.get(
+        `https://angelsprotectorss.onrender.com/api/ngo`
+      );
       const results = response.data.data;
 
       // Filter the results based on the searchQuery
@@ -54,7 +56,7 @@ const Search = () => {
 
         {errorMessage && <p>{errorMessage}</p>}
       </div>
-      
+
       <ul>
         {searchResults.map((ngo) => (
           <li key={ngo._id}>
@@ -64,7 +66,6 @@ const Search = () => {
           </li>
         ))}
       </ul>
-
     </div>
   );
 };

src/components/SingleOnDuty/OnDutyHome.css

@@ -9,6 +9,14 @@ a:hover {
   /* Additional styles if needed */
 }
 
+.div-home {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 30px auto;
+  max-width: 800px;
+}
+
 .span-location {
   display: block;
   padding: 10px;
@@ -20,19 +28,11 @@ a:hover {
   width: 250px !important;
 }
 
-.div-home {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  /* height: 30vh; */
-  justify-content: center;
-  margin-top: 30px;
-}
-
 .caseroul-image-style {
-  width: 250px;
+  width: 200px;
   height: 15vh;
   border-radius: 12px;
+  object-fit: cover;
 }
 
 .slick-slide {

src/components/SingleOnDuty/OnDutyHome.jsx

@@ -18,7 +18,7 @@ const OnDutyHome = () => {
     centerPadding: "0px", // Adjust the padding to center the images
     responsive: [
       {
-        breakpoint: 768,
+        breakpoint: 540,
         settings: {
           slidesToShow: 2,
         },