Lines either side of text overflowing

Question

I have some lines either side of a title and when I resize to mobile view, the line of the right of the title overflows off of the page and increases the width of the page with blank white space. Is there any way I can prevent this from happening or is there a way to make these lines more responsive? Thanks

html, body {
 margin: 0 auto;
    width: 100%;
    font-family: Barlow, Arial, Helvetica, sans-serif;
    font-weight: 300;
}

.container {
    height:100vh;
    padding: 0px 15px 0 15px;
}

#index {
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    font-size: 36px;
    color: #eeeeee;
}

#desktop-navbar {
 text-transform: uppercase;
 width: 100%;
 height: 50px;
 position: fixed;
    z-index:1;
    margin-top: 15px;
}

#nav-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

#nav-container ul {
    padding-left: 0;
}

#desktop-navbar  li {
 display: inline-block;
 padding-left: 25px;
 font-family: Barlow, Arial, Helvetica, sans-serif;
    font-weight: 300;
    letter-spacing: 2.5px;
}

#desktop-navbar li a {
    text-decoration: none;
    color: #ffffff;
}

#mobile-nav-container {
    display: none;
}

#index p {
    margin: 0;
}

#index span {
    font-size: 84px;
}

.center {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100%;
}

#main > span{
    position: relative;
    display: inline-block;
}

#main > span:before, #main > span:after{
    content: '';
    position: absolute;
    top: 50%;
    height: 5px;
    border-bottom: 2px solid;
    width: 35%; /* half of limiter*/
}

#main > span:before{
    right: 100%;
    margin-right: 15px;
}

#main > span:after{
    left: 100%;
    margin-left: 15px;
}

@media only screen and (max-width: 1280px) {

    #index {
        font-size: 28px;
    }

    #index span {
        font-size: 72px;
    }

}

@media only screen and (max-width: 992px) {

    #index {
        font-size: 22px;
    }

    #index span {
        font-size: 62px;
    }

}

@media only screen and (max-width: 810px) {

    #index {
        font-size: 22px;
    }

    #index span {
        font-size: 62px;
    }

}

@media only screen and (max-width: 690px) {

    #nav-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: right;
    }

    #desktop-nav {
        display: none;
    }

    #mobile-nav-container {
        display: block;
        margin-right: 25px;
    }

}

@media only screen and (max-width: 320px) {

    

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Joshua Evans</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Barlow:300,400&display=swap" rel="stylesheet">
</head>
<body>

        <div id="desktop-navbar">
            <div id="nav-container">
                <ul id="desktop-nav">
                    <li class="desktop-items"><a href="#home">Home</a></li>
                    <li class="desktop-items"><a href="#about">About</a></li>
                    <li class="desktop-items"><a href="#services">Soundtracks</a></li>
                    <li class="desktop-items"><a href="#gallery">Credits</a></li>
                    <li class="desktop-items"><a href="#contact">Contact</a></li>
                </ul>
                <ul id="mobile-nav-container">
                        <li id="mobile-menu"><a href="#contact">Menu</a></li>
                    </ul>
            </div>
        </div>
    
    <div id="index" class="container">
  <div class="center">
            <p id="main"><span>Joshua Evans</span></p>
            <p>Composer</p>
  </div>
 </div>

</body>
</html>

make sure to consider ALL the answers and you will find many responsive ways — Temani Afif, Jun 01 '19 at 12:36
The problem here is with the width of the pseudo-elements. The 35% width you are setting is defined as 35% of the width of the `span` that they belong to. If you want the lines to occupy the full-width of the space, then you'd be better introducing them to the parent `p`, which already occupies the width of the parent element — Martin, Jun 01 '19 at 12:37

Lines either side of text overflowing

0 Answers0