[stewardsofselfParticipant]

My home page (sosfitcoach.com) currently only has the revolution slider and menu on it with text overlaying the slider… however on mobile the text on the slider is far too small to read so I would like to create the text to stand alone below the slider on the page. Is there any way to do this?? Thank you!

[ThaiModerator]

Hi There,

#1] Please add the following code under Customizer > Custom > Global Javascript:

jQuery(document).ready(function($){
	$('<div class="x-custom-text x-hidden-desktop">This is my example text. You can change to whatever you want.</div>').insertAfter('.home #rev_slider_1_1_wrapper');
});

#2] Please add the following CSS under Customizer > Custom > Global CSS:

.x-custom-text {
    color: #fff;
}

Hope it helps 🙂

[stewardsofselfParticipant]

I tried that, but it didn’t work 🙁 The homepage is still only showing the menu and slider.

[ThaiModerator]

That text only displays on the mobile:

View post on imgur.com

Regards!

[stewardsofselfParticipant]

Actually it works on mobile, but I’d like it on desktop as well 🙂 Is there a code change so that it will show up on desktop (I’m going to be removing the text from the slider so I would like the added text on all platforms)

[ThaiModerator]

Hi There,

Please update this code a bit:

jQuery(document).ready(function($){
	$('<div class="x-custom-text">This is my example text. You can change to whatever you want.</div>').insertAfter('.home #rev_slider_1_1_wrapper');
});

Hope it helps 🙂

[stewardsofselfParticipant]

Awesome! Thanks! Is there any way to center align the text? Other than that one small detail it’s perfect 🙂

[ThaiModerator]

Please also update the CSS to this:

.x-custom-text {
    color: #fff;
    text-align: center;
}

Hope it helps 🙂

[stewardsofselfParticipant]

Perfect!! Thank you 🙂

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts