I can't seem to figure out how to have the content under the big green thumbnail to resize and adjust when the window size is changing. The thumbnail and up, the content resizes. I have tried to copy what I did in the top of the page, but I think I got stumped when making my side navigation bar.
/* .leftside {
max-width: 380px;
width: 100%;
}
#sidebar.sticky{
float: none;
position: fixed;
top:20px;
z-index:6;
left:auto;
} */
body {
max-width: 100%;
overflow-x: hidden;
}
.project-title {
font-size: 64px;
color: #1a1b1f;
line-height: 150%;
font-family: 'Bitter', serif;
margin-top: 87px;
}
.project-subtitle {
font-size: 25px;
line-height: 28px;
color: #1a1b1f;
font-family: 'Ubuntu', sans-serif;
font-weight: 300;
margin-bottom: 54px;
}
.about-project {
font-size: 20px;
line-height: 28px;
color: #1a1b1f;
font-family: 'Bitter', serif;
font-weight: 700;
}
.about-info {
font-size: 15px;
line-height: 28px;
color: #7e7e7e;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.four-intro-section-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
max-width: 100%;
margin-top: 60px;
column-gap: 30px;
}
.img-box {
display: grid;
height: 100%;
margin-top: 35px;
}
.large-thumbnail {
max-width: 100%;
max-height: 100vh;
margin: auto;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(46, 38, 38, 0.2);
}
.text-under-thumbnail {
font-size: 16px;
line-height: 28px;
color: #e47239;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
justify-content: center;
display: flex;
margin-top: 10px;
margin-bottom: 10px;
}
.sidenav a {
text-decoration-line: none;
color: #999;
font-size: 16px;
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
margin-bottom: 3px;
padding-bottom: 5px;
}
.sidenav li {
list-style-type: none;
margin-bottom: 1.5rem;
}
/* .container{
width: 1100px;
margin:: 50px auto;
clear:both;
}
.container: before, .container:after {
content: '';
display: table;
clear:both;
}
.right{
width:750px;
display: inline-block;
vertical-align: top;
float: right;
}
*/
.left {
width: 12vw;
height: 100vh;
background: #fffff6;
display: flex;
float: left;
position: sticky;
align-items: center;
top: 50px;
}
/* .right{
display: grid;
height: 100%;
max-width: 100%;
max-height: 100vh;
margin: auto;
} */
.section {
text-transform: uppercase;
color: #007b81;
font-size: 16px;
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
.section-title {
color: black;
font-size: 35px;
font-family: 'Bitter', serif;
font-weight: 400;
line-height: 62px;
margin-top: 7px;
margin-bottom: 15px;
}
.section-paragraph {
color: #535457;
font-size: 17px;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
margin-bottom: 5rem;
line-height: 2;
}
.sidenav a:hover {
color: #e47239;
}
.sidenav a:active {
color: #e47239;
}
.right {
width: 750px;
display: inline-block;
vertical-align: top;
float: right;
}
.container {
width: 1100px;
clear: both;
margin-top: 87px;
margin-bottom: 47px;
}
.container::before,
.container::after {
content: '';
display: table;
clear: both;
}
.buttons {
background-color: white;
border: none;
border-style: solid;
color: #e47239;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
margin-left: 15px;
padding: 14px 15px 14px 15px;
font-size: 15px;
}
.buttons:hover {
background-color: #e47239;
color: white;
border: #e47239;
border-width: 2px;
border-color: white;
border: none;
border-style: solid;
}
.buttons:active {
opacity: 0.7;
}
.section {
display: grid;
height: 100%;
}
.section-img {
max-width: 100%;
max-height: 100vh;
margin: auto;
border-radius: 18px;
}
.caption-under-img {
font-size: 16px;
line-height: 28px;
color: #7e7e7e;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
justify-content: center;
display: flex;
margin-top: -85px;
margin-bottom: 5rem;
}
.big-img {
max-width: 950px;
margin-left: -150px;
border-radius: 18px;
margin-right: 50px;
}
.gif-grid {
display: grid;
grid-template-columns: 2fr 2fr;
margin-top: 20px;
column-gap: 80px;
justify-content: space-between;
align-items: center;
margin-left: -100px;
}
.section-gif {
height: 520px;
float: right;
}
.gif-title {
font-family: 'Bitter', serif;
font-size: 25px;
color: black;
font-weight: 700;
line-height: 28px;
margin-bottom: 0.5rem;
}
.gif-caption {
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
color: black;
font-weight: 300;
line-height: 28px;
}
<!DOCTYPE html>
<html>
<body>
<script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js "></script>
<script src="stickySidbar.js"></script>
<div class="top-part">
<div class="nav-grid">
<nav>
<div>
<img class="logo" src="images/logoo.png">
</div>
<ul class="list">
<li class="projects"><a href="#">PROJECTS</a></li>
<li class="about"><a href="#">ABOUT</a></li>
<li class="resume"><a href="#">RESUME</a></li>
</ul>
</nav>
</div>
<div class="main-container">
<div>
<p class="project-title">Sightseer<span style="color:#E47239">.</span></p>
<p class="project-subtitle">Created mobile tourist app to bridge the gap betweens locals and tourists.</p>
</div>
<div class="four-intro-section-grid">
<div>
<p class="about-project">Role</p>
<p class="about-info">UX Designer</p>
</div>
<div>
<p class="about-project">Team</p>
<p class="about-info">Ellie Kwon <br> Maciej Czapnik <br> Kimberly Nguyen </p>
</div>
<div>
<p class="about-project">Timeline</p>
<p class="about-info">40 hours <br> 2023 Catalyst Designathon - BU FORGE Design Studio</p>
</div>
<div>
<p class="about-project">Skills</p>
<p class="about-info"> Figma <br> Slack</p>
</div>
</div>
<div class="img-box">
<img class="large-thumbnail" src="images/lthumbnail1.png">
</div>
<div class="skip-final-designs">
<p class="text-under-thumbnail">Skip to Final Designs</p>
<div class="button-under" style="justify-content: center;
display:flex;">
<button class="buttons">Final Designs</button>
</div>
</div>
<div class="container">
<div class="left">
<div class="sidenav">
<ul>
<li style="margin-bottom:2.5rem;"> <a href="#home">Home</a></li>
<li> <a href="#context">Context</a></li>
<li><a href="#problem">Problem</a></li>
<li><a href="#solution">Solution</a></li>
<li><a href="#contribution">Contribution</a></li>
<li><a href="#goals">Goals</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#ideation">Ideation</a></li>
<li><a href="#finaldesigns">Final Designs</a></li>
<li><a href="#learnings">Learnings</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="main">
<h3 class="section" id="context">CONTEXT</h3>
<h1 class="section-title">What is Sightseer?</h1>
<p class="section-paragraph"><span style="color:#E47239"><strong>Received 2nd place at the 2023 Catalyst Designathon hosted by BU FORGE Design Studio!</strong></span><br><br>Sightseer is a mobile application designed to empower the local communities by connecting them
to tourists and to steer away from commercialization in the tourist industry allowing them to <strong>explore the world through the eyes of a local.</strong></p>
<h3 class="section" id="problem">PROBLEM</h3>
<h1 class="section-title">Large corporations taking away from locals.</h1>
<p class="section-paragraph">According to Statista, tourism contributed roughly $5.8 trillion USD to the global economy in 2021. But how much of this contribution cycles through local communities? The United Nations Environmental Programme has found that for every $100
spent by a tourist, only $5 stays within the local economy. Majority of this money flows into the pockets of large corporations, who use these funds to continue gentrifying and changing the native landscape to appeal to tourists. As popular
destinations continue to cater to short-term visitors, the locals are pushed aside as their history is erased away.<br>As many developing countries depend on tourism as the backbone of their economy, it is necessary that we begin correcting
this uneven distribution of wealth. We believe that it’s time to start bringing attention back to local communities and small business owners. We believe that it’s time we start giving back to the locals.
</p>
<h3 class="section" id="solution">Solution</h3>
<h1 class="section-title">Empower locals with a tour guide app for tourists
</h1>
<p class="section-paragraph">In order to give back to the locals, we needed to create a way for locals to gain passive income. Hence, the birth of Sightseer. With Sightseer, locals can post curated tours based on their knowledge as a native. Each tour would retail for
around $10 to $20 and upon purchase, tourists would be able to guide themselves along the provided route at their own pace.<br>As a tourist, you’re visiting someone else’s hometown – what better way to get around than with a local friend
at a low price point? As locals create these tours, they could even lead tourists through their own small businesses or family owned restaurants. <br>With this solution tourists are gaining a unique experience, and locals are gaining passive
income with the potential to boost their existing earnings.</p>
<h3 class="section" id="contribution">MY CONTRIBUTION</h3>
<h1 class="section-title">Flow 3</h1>
<p class="section-paragraph">I worked closely with my team members, Ellie and Maciej. I worked solely on Flow 3 from conducting research to delivering the final craft.</p>
<h3 class="section" id="goals">Goals</h3>
<h1 class="section-title">Create a working prototype in 40 hours</h1>
<p class="section-paragraph">The rules of the Designation was to create at least 15 screens in 40 hours.</p>
<h3 class="section" id="research">Research</h3>
<h1 class="section-title">Understanding the market & users</h1>
<p class="section-paragraph">
<img class="section-img" src="images/User Personas.jpg">
<p class="caption-under-img">User Personas</p>
</p>
<h3 class="section" id="ideation">Ideation</h3>
<h1 class="section-title">Lots of sketching & communicating
<!-- <div class = "img-grid-section">
<div class="div1"><img class="section-img" src ="images/User Flow.jpg"></div>
<div class="div2"><img class="section-img-grid" src ="images/STYLE GUIDE.png"> </div>
<div class="div3"><img class="section-img-grid" src ="images/DESIGN INSPIRATION.png"> </div>
</div> -->
</h1>
<p class="section-paragraph">
<img class="section-img" src="images/User Flow.jpg">
<p class="caption-under-img">User Flow</p>
</p>
<h3 class="section" id="finalsdesigns">Final Designs</h3>
<h1 class="section-title">Introducing Sightseer !</h1>
<p class="section-paragraph">The go to app for locals and tourists to connect.</p>
<img class="big-img" style=" margin-top: -56px; " src="images/Sightseer google play app store.png">
<div class="gif-grid">
<div class="gif-text">
<p class="gif-title">Find a tour with intent</p>
<p class="gif-caption">Whether you like a specific tour style or only have time for a half day, walking, or time of day, the filter system will help you find those tours.</p>
</div>
<div><img class="section-gif" src="images/sightseergif1.gif"></div>
</div>
<div class="gif-grid">
<div><img class="section-gif" src="images/sightseergif1.gif"></div>
<div class="gif-text">
<p class="gif-title">Find a tour with intent</p>
<p class="gif-caption">Whether you like a specific tour style or only have time for a half day, walking, or time of day, the filter system will help you find those tours.</p>
</div>
</div>
<h3 class="section" id="learnings">Learnings</h3>
<h1 class="section-title">Animations!</h1>
<p class="section-paragraph">Upon participating in the designathon, I drew on my basic experience working with Figma in my UI/UX course. However, I was thrilled to have the opportunity to expand my knowledge by creating a functional mobile prototype within a tight timeframe
of just 2 days! Remarkably, our team secured the 2nd place spot in the highly competitive "Travel" category.</p>
<p class="section-paragraph">One of the most exciting challenges I tackled was developing an integrated map with a marker that would dynamically track the user's location. Utilizing smart animations, I was able to bring my vision to life and design an interface that exceeded
my expectations.</p>
<p class="section-paragraph">The process was incredibly enjoyable and fulfilling, providing me with invaluable insights that will undoubtedly inform my future endeavors.</p>
<h3 class="section">Thank you!</h3>
<p class="section-paragraph">Thank you for reading my case study!</p>
</div>
</div>
</body>
</html>
</div>
<div class="button-under" style="justify-content: center;
display:flex;">
<button class="buttons">Back to Homepage</button> </div>
I have tried to adjust the display and change the width
