Search code examples
htmlcssmedia-queries

How can I make text drop down to a second line using media queries?

When my site is at a specific size I want the logo to break in half so that Photography & Design are on a second line. How would I accomplish this?

@media only screen and (max-width: 424px) {
    
}
<nav>
        <h1 class="logo">Brian Funderburke Photography &amp; Design</h1>  
</nav>

Solution

  • The simplest way would be to add a span that wraps around what you want to be on its own line, then target it, and assign it display: block;

    I highly recommend you make this more robust with proper class name selection and so forth.

    HTML:

    <nav>
  <h1 class="logo">Brian Funderburke <span>Photography &amp; Design</span></h1>
</nav>

    CSS:

    @media only screen and (max-width: 424px) {
  .logo span {
    display: block;
  }
}

    https://jsfiddle.net/6vcbdqqk/