font changed

Author: engineerscodes

src/components/Accounce/new.css

@@ -1,7 +1,7 @@
 #Acc-container {
     background-color: #20dea0;
     width: 100%;
-    height: 80vh;
+    min-height: 80vh;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,8 +15,8 @@
     padding: 0;
     margin: 0;
     box-sizing: border-box;
-    width: 500px;
-    height: 500px;
+    max-width: 500px;
+    min-height: 500px;
     background-color: white;
     position: relative;
     box-shadow: 5px 5px 15px black;
@@ -28,6 +28,8 @@
     z-index: 0;
     overflow: hidden;
     border-radius: 10px;
+    margin-left: 20px;
+    margin-right: 20px;
 
 
 }
@@ -68,7 +70,7 @@
 }
 
 #Acc-card:hover:before {
-    transform: scale(45);
+    transform: scale(70);
 }
 
 #Acc-go-corner {

src/components/Cards/CardStyle.js

@@ -53,7 +53,11 @@ export const Card = styled.div`
     grid-template-rows: 190px 310px 100px;
   }
   @media screen and (max-width: 320px) {
-    grid-template-columns: 180px;
+    grid-template-columns: 200px;
+    grid-template-rows: 190px 310px 100px;
+  }
+  @media screen and (max-width: 300px) {
+    grid-template-columns: 150px;
     grid-template-rows: 190px 310px 100px;
   }
 `;
@@ -147,3 +151,22 @@ export const Lefts = styled.h3`
     font-size: 14px;
   }
 `;
+
+export const HeadingText = styled.h1`
+  height: 38px;
+  font-size: 1.5vw;
+  font-weight: bold;
+
+  @media screen and (max-width: 960px) {
+    font-size: 2vw;
+  }
+
+  @media screen and (max-width: 690px) {
+    font-size: 2.5vw;
+  }
+  @media screen and (max-width: 530px) {
+    font-size: 4vw;
+  }
+`;
+
+

src/components/EventsList/EventCrads.js

@@ -9,6 +9,7 @@ import {
   CStat,
   AchorTag,
   Lefts,
+  HeadingText,
 } from "../Cards/CardStyle";
 const EventCrads = (props) => {
   let leftDate;
@@ -30,9 +31,9 @@ const EventCrads = (props) => {
       <Card>
         <Cardimage backgrounds={props.image}></Cardimage>
         <Cardtext>
-          <h1 style={({ height: "38px" ,fontSize: "1.5vw" })}>
+          < HeadingText >
             {props.cardTitles}
-          </h1>
+            </HeadingText>
           <h3>DATE : {props.edate.split("-").reverse().join("-")}</h3>
           <h3>VENUE : {props.evenue}</h3>
           <ParaCard>{props.cardText}</ParaCard>

src/components/EventsList/EventGrid.js

@@ -19,6 +19,10 @@ export const Teamgrids = styled.div`
   @media screen and (max-width: 720px) {
     grid-template-columns: repeat(1, 300px);
   }
-
-  
+  @media screen and (max-width: 320px) {
+    grid-template-columns: repeat(1, 280px);
+  }
+  @media screen and (max-width: 320px) {
+    grid-template-columns: repeat(1, 150px);
+  }
 `;

src/components/NavBar/NavBarStyle.js

@@ -38,6 +38,9 @@ export const NavLogo = styled(LinkR)`
   margin-left: 24px;
   font-weight: bolder;
   text-decoration: none;
+  @media screen and (max-width: 330px) {
+    font-size: 1rem;
+  }
 `;
 
 export const MobileIcon = styled.div`

src/components/Teams/TeamMainStyled.js

@@ -3,12 +3,6 @@ import styled from "styled-components";
 export const DisplayList = styled.div`
   display: flex;
   background: #010606;
-
-  @media screen and (max-width: 768px) {
-  }
-
-  @media screen and (max-width: 480px) {
-  }
 `;
 
 export const DisplayH1 = styled.h1`
@@ -23,6 +17,10 @@ export const DisplayH1 = styled.h1`
   @media screen and (max-width: 480px) {
     font-size: 2rem;
   }
+  @media screen and (max-width: 330px) {
+    font-size: 1.5rem;
+    padding: 5px auto 25px auto !important;
+  }
 `;
 
 export const DisplayListEvent = styled.div`