Home > Blockchain >  Why does my text not wrap and gets cut off?
Why does my text not wrap and gets cut off?

Time：10-21

I am new to coding and I am trying to make a responsive site with a timeline. However, for some reason the text does not wrap on the mobile version and makes you have to scroll horizontally to read all of it.
When I added overflow-x, it cuts off the text and also cuts the dots on the timeline in half.

Could someone please help me with my code and tell me how I can fix this?
Thank you!

*{
        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: 1000px;
}

.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>
            <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>
    </div>

</section>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

It could be that the text is clipping due to overflow-x:hidden; so you could try removing that.

*{
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans', sans-serif;
   overflow-x: hidden;
}

CodePudding user response：

Change timeline width:100% instead of 1000px

*{
        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>
            <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>
    </div>

</section>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

don't gave .timeline width, because div already have width: 100%; just remove this width from css

CodePudding user response：

Remove { overflow:hidden; } from * and replace the .timeline { width:1000px; } style with .timeline{ width:100%; }

Page link：https//www.codepudding.com/Blockchain/159883.html

Prev:How to target first letter of p only if it's first child of parent?
Next:My navbar contents are merged within one another
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding