BlueOwlCreative » Topic: How to break on mobile (boc_text_slider)

How to break on mobile (boc_text_slider)

AlexNavas — Mon, 20 Mar 2017 18:46:56 +0000

I am using the boc_text_slider on my home page, but I noticed that the line isn’t breaking on mobile like the header above it is. Is there some way to cause a break on mobile like the other header?

The boc_text_slider text is on the header of http://amplifiedresults.com.

Reply To: How to break on mobile (boc_text_slider)

BlueOwl — Tue, 21 Mar 2017 07:34:49 +0000

Hi there,

Nope, the effect is meant for short wordings and technically it doesn’t allow for being broken apart. The solution would be to enforce a smaller font-size in mobile. I can see you are using the text_44_on_mobile class to make it 44px in size in mobile.
You can experiment by modding the class to a smaller size, in your stylesheets/grid_responsive.css change:

font-size: 44px !important;

to say:

font-size: 20px !important;

Reply To: How to break on mobile (boc_text_slider)

AlexNavas — Tue, 21 Mar 2017 21:58:32 +0000

is there a way to show the boc_text_slider on everything except on mobile and on mobile use text_rotate which does break on mobile?

Reply To: How to break on mobile (boc_text_slider)

BlueOwl — Wed, 22 Mar 2017 09:26:11 +0000

You could, all the code is in your common.js file.
You can add a check around this for mobile

// Text Slider
$(".boc_text_slider").each(function(){

	$(this).waypoint(function() {
		
		$(this).css({ opacity: 1 });
		$(this).boc_text_slider();
		
	}, { offset:'90%',triggerOnce: true});
});

like so:

if(!boc_is_mobile){
// Text Slider
$(".boc_text_slider").each(function(){

	$(this).waypoint(function() {
		
		$(this).css({ opacity: 1 });
		$(this).boc_text_slider();
		
	}, { offset:'90%',triggerOnce: true});
});
}

This will disable it in mobile.

Reply To: How to break on mobile (boc_text_slider)

AlexNavas — Wed, 22 Mar 2017 16:12:27 +0000

Great. And what code would I use to show the text_rotate only instead of mobile? I only want the replacement to happen on the home page.

Reply To: How to break on mobile (boc_text_slider)

BlueOwl — Thu, 23 Mar 2017 07:58:45 +0000

Try this instead:

if(!boc_is_mobile){
// Text Slider
$(".boc_text_slider").each(function(){

	$(this).waypoint(function() {
		
		$(this).css({ opacity: 1 });
		$(this).boc_text_slider();
		
	}, { offset:'90%',triggerOnce: true});
});
}else {
$(this).textrotator({
		animation: "flipUp", // Options are dissolve (default), fade, flip, flipUp, flipCube, flipCubeUp and spin.
		separator: ";",
		speed: 3000 // How many milliseconds until the next word show.
	});
}

Reply To: How to break on mobile (boc_text_slider)

AlexNavas — Mon, 27 Mar 2017 17:05:12 +0000

I didn’t want to edit the code so I didn’t overwrite it when updating the theme. What I did instead was used css based on the screen size which gave me the effect I was looking for.

@media screen and (min-width:769px) {
.homepage-header-mobile {
display: none!important;
}
}

@media screen and (max-width:768px) {
.homepage-header-full {
display: none;
}
}