How to Remove Top HR Line?-CodePudding

I have an HR tag underneath a header; I noticed that there are actually two lines (one underneath the header and another one above it) when I only want one line underneath the header.

How can I remove the top line and keep only the bottom underline? The top line is not only unnecessary, but it messes up the website's look..


        <div >

            <hr> <h1>We Create </h1> <hr>

            <h3>PLACES THAT INFLUENCE</h3>
            <p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
            <h3>PLACES THAT INSPIRE</h3>
            <p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
            <h3>PlACES THAT INFORM</h3>
            <p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
        </div>





hr {
    
    margin-top: -12.5px;
    width: 14.3rem;
    height: 1.5%;
    color: black;
    background: black;
    border-radius: 2px;
}



.what-we-do h1{
    padding-top: 80px;
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 48px;
    /*-webkit-text-decoration: underline 12px;
    text-decoration: underline 12px;
     -webkit-text-underline-position: under;
    text-underline-position: under;*/
    color: #300600;
    padding-bottom: 25px;
}

.what-we-do h3{
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 24px;
    padding-top: 65px;
    color: #300600;
}

.what-we-do p {
    padding-top: 50px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    word-spacing: 0.75px;
    line-height: 50px;
    color: #300600;
}

CodePudding user response：

Give the upper hr a class upperhr then use @media query for your preferred screen size then set display property to none.

.what-we-do{
    display: grid;
  grid-template-columns: 1fr 1fr;

  column-gap: 94px;
}




hr {
    
    margin-top: -12.5px;
    width: 14.3rem;
    height: 1.5%;
    color: black;
    background: black;
    border-radius: 2px;
}



.what-we-do h1{
    padding-top: 80px;
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 48px;
    /*-webkit-text-decoration: underline 12px;
    text-decoration: underline 12px;
     -webkit-text-underline-position: under;
    text-underline-position: under;*/
    color: #300600;
    padding-bottom: 25px;
}

.what-we-do h3{
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 24px;
    padding-top: 65px;
    color: #300600;
}

.what-we-do p {
    padding-top: 50px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    word-spacing: 0.75px;
    line-height: 50px;
    color: #300600;
}

@media only screen and (max-width: 600px){
    .upperhr{
        display: none;
    }
}

    <div >

        <div >

            <hr > <h1>We Create </h1> <hr>

            <h3>PLACES THAT INFLUENCE</h3>
            <p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
            <h3>PLACES THAT INSPIRE</h3>
            <p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
            <h3>PlACES THAT INFORM</h3>
            <p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
        </div>
        </div>