Editing First, Second, and Third Word From Title in Jumbotron

Illdy
1

I would like to be able to edit the First, Second, and Third Word From Title, but do not know how to do this with CSS.

When you inspect the three main words on the jumbotron, this is the HTML.

<div class=“col-sm-12”>
<h2>
<span data-customizer=“first-row-from-title”> FIRST WORD FROM TITLE </span>
<span class=“span-dot first-span-dot”>.</span>
<span data-customizer=“second-row-from-title”> SECOND WORD FROM TITLE </span>
<span class=“span-dot second-span-dot”>.</span>
<span data-customizer=“third-row-from-title”> THIRD WORD FROM TITLE </span>
</h2>
</div>

I would like to have these words align like this:

FIRST WORD
SECOND WORD
THIRD WORD

but only on mobile devices.

I have never seen “data-customizer”, so I am not familiar on how I can customize each of these words individually.

2

Here is a screenshot of the HTML I am referring to, please help me if you know how I can customize/edit the span elements.

Thank you in advance, PLEASE HELP ASAP!

3

ALSO, the formatting didn’t show up in the example I included on how I would like the words to look :confused: Basically, I would like them to be aligned diagonally. So word 1 would have “padding-left: 0px”, word 2, “padding-left: 10px”, and word 3, “padding-left: 20px”.

4

Hello Amber,

Unfortunately, I cannot assist you with making the 3 words on the jumbotron to fall on a new row only on mobile devices while displaying diagonally as it would require extensive custom work that clearly falls short to the support scope.

If you are looking for any custom work paid services, add me on Skype (Ion Rutz) for more details.

Regards

5

Hi Ion!

I’m also wondering how to make the 3 words on the jumbotron to fall on a new row but on all devices. Is there a css insert?

Thanks a bunch!

6

Hello Myka,

You should try this CSS solution:

.third-row-from-title { display: block; }

Let me know if it’s working as expected.

Regards