Skip to content

Commit

Permalink
Fixed workshops mobile screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oreo236
Oreo236 committed Nov 1, 2024
1 parent 5804819 commit 5ddf616
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 38 deletions.
136 changes: 102 additions & 34 deletions workshops.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,18 @@ button{
line-height: 65.37px;
position:relative;
left:-240px;}
.Why-Workshops li {font-size: 32px;

.Why-Workshops li {
font-size: 32px;
font-weight: 100;
line-height: 43.58px;
text-align: left;
width:73%;
position:relative;
top:50px;
margin-top: 30px;
margin-left:200px;}
margin-left:200px;
}
.Why-Workshops p {font-size: 32px;
font-weight: 100;
line-height: 43.58px;
Expand All @@ -96,29 +99,37 @@ button{
text-align: center;
margin-top:100px;}

.FAQ {margin-top:100px;
.FAQ {
margin-top:100px;
background-color: rgba(191, 209, 229, 1);
padding-bottom: 50px;}
.FAQ h2 {color: rgba(12, 74, 127, 1);
padding-bottom: 50px;
}
.FAQ h2 {
color: rgba(12, 74, 127, 1);
font-family:serif;
font-size: 64px;
font-weight: 700;
line-height: 72.96px;
text-align: center;
margin-left:-240px;
padding-top:100px;}
.FAQ h3 {color:rgba(103, 138, 168, 1);
padding-top:100px;
}
.FAQ h3 {
color:rgba(103, 138, 168, 1);
font-family:serif;
font-size: 64px;
font-weight: 700;
line-height: 72.96px;
text-align: center;
margin-left:-700px;
margin-top:40px;}
.FAQ ul {margin: 100px auto;
margin-top:40px;
}
.FAQ ul {
margin: 100px auto;
width: 1100px;
padding: 0;
list-style: none;}
list-style: none;
}
.FAQ li {margin-bottom: 10px;
border-bottom: 2px solid rgba(0, 0, 0, 1);
background: inherit;
Expand Down Expand Up @@ -165,51 +176,66 @@ button{
/* Media Queries */

@media screen and (max-width: 480px) {
.Workshops-Section {left: -12em;}
.Workshops-Section img {
top: 3em;
left: 24em;
display: flex;
}
.Workshops-Section {
left: -12em;
}
.Workshops-Section .brand_img {
left: 22.5em;
display: inline-block;
width: 89px;
height: 72px;
margin-top: 11em;
margin-bottom: 5em;
}
.Workshops-Section .collaborateimg {
top: 7em;
left: 12em;
}
left: 9em;
width: 294px;
height: 272px;
}
.Workshops-Section h1 {
top: -6.5em;
left: 1.7em;
justify-content: center;
display: flex;
font-size: 4em;
font-size: 3em;
margin-top: -2em;
}
.Workshops-Section p {
top: -7em;
left: 8em;
margin-top: 5em;
left: 12em;
width: 80%;
}
font-size: 20px;
}

.Why-Workshops {margin-top: 8em;}
.Why-Workshops h3 {
left: 0em;
font-size: 3em;
font-size: 2.25em;
}
.Why-Workshops ul {
left: -11em;
top: -4em;
position: relative;
}
.Why-Workshops li {
.Why-Workshops ul li {
width: 5;
width: 90%;
line-height: 1.4em;
font-size: 1.25em;
}
.Why-Workshops p {
.Why-Workshops .info {
width: 80%;
left: -4em;
top: -1em;
left: -9em;
margin-top: 1em;
position: relative;
font-size: 2em;
font-size: 1.25em;
}
.Why-Workshops .TBC {
width: 80%;
left: -5em;
margin-top: 1em;
position: relative;
font-size: 2em;
}

.FAQ {
padding: 0%;
Expand All @@ -234,9 +260,51 @@ button{
position: relative;
left: 1em;
}
.FAQ li {width: 38%;height: auto;}
.FAQ label {height:auto}
.FAQ ul li .accordion-content p {height: 45em;}
.FAQ p {height:auto;}
.FAQ li {
width: 27.5%;height: auto;
}
.FAQ li label {
height:auto;
font-size: 1em;
}
.FAQ ul li .accordion-content p {
height:auto;
font-size: 0.6em;
display: flexbox;
}
.FAQ input {height:auto;}

}
@media screen and (max-width: 387px) {
.Workshops-Section {
left: -12em;
}
.Workshops-Section .brand_img {
left: 12em;
display: inline-block;
width: 89px;
height: 72px;
margin-top: 14em;
}
.Workshops-Section .collaborateimg {
left: 9em;
width: 294px;
height: 272px;
top: -150px;
}
.Workshops-Section h1 {
left: 1.7em;
justify-content: center;
display: flex;
font-size: 3em;
top: -450px;
}
.Workshops-Section p {
left: 12em;
width: 80%;
font-size: 20px;
top: -350px;
margin-bottom: 5px;
}

}
8 changes: 4 additions & 4 deletions workshops.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link href="https://fonts.googleapis.com/css2?family=Domine:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

<meta http-equiv="X-UA-Compatible™" content="IE-edge">

</head>
Expand Down Expand Up @@ -63,7 +63,7 @@
</script>

<section class= "Workshops-Section">
<img src=images/Brand/blueleaf.svg>
<img class= "brand_img" src=images/Brand/blueleaf.svg>
<img class= "collaborateimg" src=images/feedback.svg>
<h1>Workshops</h1>
<p>At CommuniCare, our workshops are designed to empower
Expand All @@ -77,15 +77,15 @@ <h1>Workshops</h1>

<section class= "Why-Workshops">
<h3>Why Attend a Workshop</h3>
<ul>
<ul style="list-style-type:disc;">
<li>Receive step-by-step guidance on gaining healthcare access
(via insurance or other avenues) </li>
<li>Acquire a curated list of local healthcare resources. </li>
<li>Experience a live demonstration of our free CommuniCare app,
showcasing how it connects individuals to tailored healthcare
services based on their unique needs</li>
</ul>
<p>By tailoring our workshops to the specific needs of our audience
<p class="info">By tailoring our workshops to the specific needs of our audience
and community partners, we strive to make a meaningful impact
and support the health and well-being of those we serve. </p>
<p class="TBC">Stay tuned for our fall 2024 workshop schedule!</p>
Expand Down

0 comments on commit 5ddf616

Please sign in to comment.