chad/chadsreactproject
1
0
Fork 0
mirror of https://github.com/DevEhChad/chadsreactproject.git synced 2025-11-08 13:31:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

socials ultrawide fix

Browse Source
This commit is contained in:
Chad Doty
2025-01-07 06:19:42 -05:00
parent b5bb4dd90f
commit d1d613422d
1 changed files with 67 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/styles/Socials.css
View File

@@ -1,72 +1,73 @@
.social { .social {
background-color: gray; background-color: gray;
width: 100%; width: 100%;
height: auto; height: 90svh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.social .socialTitle { .social .socialTitle {
font-family: sans-serif, Arial; font-family: sans-serif, Arial;
font-size: 60px; font-size: 60px;
} }
.socialList {
width: 70vw;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: center;
}
/* social ITEM STYLING */
.socialItem {
background-color: lightgray;
border-radius: 15px;
width: 300px;
height: 350px;
margin: 20px;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.socialItem:hover {
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
transition: 0.3s ease-in;
cursor: pointer;
}
.socialItem div {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
width: 100%;
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.socialItem a {
text-decoration: none;
color: black;
margin: 20px;
font-size: 20px;
}
.socialItem h1,
.socialItem p {
margin-left: 20px;
}
@media only screen and (max-width: 1300px) {
.socialList { .socialList {
width: 70vw; grid-template-columns: 1fr 1fr;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: center;
} }
}
/* social ITEM STYLING */ @media only screen and (max-width: 800px) {
.socialList {
.socialItem { grid-template-columns: 1fr;
background-color: lightgray;
border-radius: 15px;
width: 300px;
height: 350px;
margin: 20px;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
} }
.socialItem:hover { }
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
transition: 0.3s ease-in;
cursor: pointer;
}
.socialItem div {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
width: 100%;
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.socialItem a {
text-decoration: none;
color: black;
margin: 20px;
font-size: 20px;
}
.socialItem h1,
.socialItem p {
margin-left: 20px;
}
@media only screen and (max-width: 1300px) {
.socialList {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 800px) {
.socialList {
grid-template-columns: 1fr;
}
}