change pre header text alignment if mobile

[sarahtodde]

Hello, I am using Weaver Xtreme. I am having some issues with my pre header. I would like to change the alignment of the text from align-right to align-center but only on phone devices. I would also like to eliminate the pre header image (no the entire pre header) on phone devices. Any suggestions? Thanks in advance. http://carolinainsurancesolutions.com

[scrambler]

To make something be visble or hidden on a specific device, just put the HTML in a [show_if] or [hide_if] shortcode as explained in the Add-Ons page. Like

[hide_if device='phone']your image html[/hide_if]

To change the alignement of your text on mobuile, give it a class and then use custom CSS to style it different on phones.

Like using

<p class=”mytext”>your text</p>

then add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

.is-phone .mytext {text-align:center;}

mobile classes you can use are

.is-desktop

.is-smalltablet

.is-phone

.is-mobile

[sarahtodde]

Thanks Scrambler. I have the pre header image styled in CSS as a background image, it is not placed in the HTML pre header area so I cannot use the shortcode, right? I played around with putting the pre header background image as HTML instead, but that would mean that I have to make the logo apart of the header image. I want the logo placed on top of the header image so that it can remain a link. Do you have any other suggestions? Thanks for your help.

[scrambler]

Yes, you can use a CSS rule with the .is-phone  selector to remove the background image on phone.

.is-phone #inject_preheader {background-image:none;}

[sarahtodde]

Perfect. Thanks so much!

[Author]

Posts