Html Question posted in
Some basic documentation can be found here.

Html – h1 divides into 2 lines

hello my logo in the header gets divided into 2 lines how do i make it in 1 line? the logo is "good to go" but the word "go" comes in a second line why??
logo in 2 lines

header {
    display: flex;
    background-color: #0C1213 ;
    color: #D6B360 ;
    padding: 0% ;
    margin: 0% ;
    height: 5.5em ;
    width: 100% ;
    justify-content: space-between ;
    align-items: center ;
}

#Logo {
    margin-left: 1em;
    color: #E3BF70 ;
}
<header>
            <div id='Logo'>
                <<h1>Good To Go</h1>>
            </div>
            <div class='navigation'>
                <a href="HomePage.html" accesskey="H">Home Page</a>
                <a href="OwnerDashboard.html" accesskey="O">Owner Dashboard</a>
                <a href="CustomerDashboard.html" accesskey="C">Customer Dashboard</a>
            </div>
        </header>
Tags:

2

Answers


  1. 0

    It looks ok in your sample, there are two options.

    1. apply white-space: nowrap to your h1 CSS, which will prevent it from ever breaking to 2 lines
    2. apply flex-shrink: 0 and give a pixel width to #Logo to make sure it’s always large enough to hold the entire text string without breaking
    Login or Signup to reply.
  2. 0

    You need to specify a width to your #logo container.
    It was displaying on 2 lines because of the screen size.

    header {
    display: flex;
    background-color: #0C1213 ;
    color: #D6B360 ;
    padding: 0% ;
    margin: 0% ;
    height: 5.5em ;
    width: 100% ;
    justify-content: space-between ;
    align-items: center ;
}

#Logo {
    min-width: 200px;
    margin-left: 1em;
    color: #E3BF70 ;
}
    <header>
            <div id='Logo'>
                <<h1>Good To Go</h1>>
            </div>
            <div class='navigation'>
                <a href="HomePage.html" accesskey="H">Home Page</a>
                <a href="OwnerDashboard.html" accesskey="O">Owner Dashboard</a>
                <a href="CustomerDashboard.html" accesskey="C">Customer Dashboard</a>
            </div>
        </header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search