Responsive headine line-break with CSS

[mmelton12]

Hi,

I am trying to accomplish the following in cornerstone but not having any luck. Perhaps you can provide some help!

Technique 2: http://v3.danielmall.com/articles/responsive-line-breaks/

Working example: http://v3.danielmall.com/articles/responsive-line-breaks/demo-span/

Thanks,
Matt

[friech]

Hi Matt,

Thank you for writing in, on this example:

<h1><span class="rwd-line">You don’t understand! I coulda had class.</span> <span class="rwd-line">I coulda been a contender.</span></h1>

You can set the CLASS rwd-line to display: block; that is:

.rwd-line {
    display: block;
}

Or you can put your phrase in the same <span> tag and put a <br /> where do you want the break to occur.

e.g.

<h1><span class="rwd-line">You don’t understand! I coulda had class.<br />I coulda been a contender.</span></h1>

More about br tag here.

Another thing, the headline “RESPONSIVE LINE BREAKS” on your first link above is an image background, not a text element. You can see that here.

Cheers!

[mmelton12]

Hi,

Thanks for responding. Perhaps I wasn’t clear in my previous message. On the page of the first link, there are two techniques, if you scroll down just a bit you will see them. I am referencing technique two. You are correct though- that header image most certainly is a transparent image

The second link is an example of technique 2. I have implemented it correctly (per technique two, using the css below), but in cornerstone, the header just wraps responsively word-by-word. I do not want it to wrap when browser is resized. The header is two short sentences. I only want it to break when browser is resized (or mobile) so that the two sentences become stacked.

Here’s the method implemented on my site, however, not working:
https://www.mydeliverypath.com/?page_id=3123

Thanks,
Matt

[ruenel]

Hello Matt,

We cannot check your test page.

Meanwhile, the demo page is using this custom css:

.rwd-line { 
	display: block; 
}
        
@media screen and (min-width: 768px){
	.rwd-line { 
		display: inline; 
	}
}

The css code will display the text inline when the screen size is greater than 767 pixels. On mobile screens (which is less than 768 pixels), the text will display stacked below each other.

Hope this helps.

[mmelton12]

Sorry- page was unpublished.

Hopefully third time’s a charm.

I have implemented the methods used in the working example page (code & css) properly with-in cornerstone. But it does not work.

https://www.mydeliverypath.com/tesst/

[ruenel]

Hello @mmelton12,

You have inserted incorrect html code. You have this:

<span id="rwd-line">I am a sentence. I too am a sentence.</span>

The correct one should be this:

<span class="rwd-line">I am a sentence.</span>
<span class="rwd-line">I too am a sentence.</span>

Take note of the difference between the ID and the class in the element.

• https://www.w3schools.com/html/html_id.asp
• https://www.w3schools.com/html/html_classes.asp

[mmelton12]

Can’t believe I missed that!

Also can’t believe, it didn’t fix it

https://www.mydeliverypath.com/tesst/

[jade]

Hello Matt,

I have checked your site and it seems to be working now:

Kindly try to clear your browser cache and check the site again.

Hope this helps.

[mmelton12]

I’m not sure I understand how you consider this working. The video clearly shows the second sentence wrapping. My goal here is for the entire sentence to break to a new line. All or nothing here. It’s either:

I am a sentence. I too am a sentence.

OR

I am a sentence.
I too am a sentence.

[friech]

Hi @mmelton12,

Sorry for the confusion, I’ll tell you what is the issue, we have set the sentence to display: inline; at 768px and above screens, right? That is what this @media screen and (min-width: 768px) rule is for.

Now as you can see here

The text starts to wrap at 792px (still above 768px), the display: block; trigger at 767px. The text is wrapping while the break is still not trigger, make sense?

The real problem with that setup is your text is set to fix 40px, it is not responsive, try 2.75rem instead.

You have two options to resolve that, adjust the font-size of your text and use a responsive unit (e.g. em or rem)

Or

Adjust the CSS @media query (min-width: 768px) to (min-width: 793px), that way the text starts to break before it wraps.

CSS Media Queries
CSS units for font-size

Hope it helps,
Cheers!