如何使用媒体查询将文本下拉至第二行？

Question

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> 

Answer 1

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/

Answer 2

if it is only about this very h1 and this very text, then set a width to force text to wrap.

 @media only screen and (max-width: 424px) { h1 { width: 10em; } } .demo { width: 10em; border: solid; /* remove this, demo purpose */ } 

 <nav> <h1 class="logo">Brian Funderburke Photography &amp; Design</h1> </nav> <p>below for demo</p> <h2 class="demo">Brian Funderburke Photography &amp; Design</h2> <h3 class="demo">Brian Funderburke Photography &amp; Design</h3> <p class="demo">Brian Funderburke Photography &amp; Design</p>