I'm trying to make a responsive timeline, and I used overflow-x so that you can't scroll horizontally, which was possible in my mobile version, thus leaving your burgermenu's children visible without actually clicking on it. However, this cut in half the circles on my timeline and I am unsure how to make it so that I can have full circles while preventing the ability to scroll horizontally. Is there any solution to this?
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
@media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>@Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>@Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>@UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>@LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>@Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>CodePudding user response：
you should add CSS display: inline-table to CSS selector .timeline ul li to display the red midpoint.
if you don't want overflow-y: hidden; on .CV, .timeline, you can delete it, but you should remove padding: 40px 0; on .timeline.
You can use this code:
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
@media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>@Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>@Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>@UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>@LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>@Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>@TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>