Change pre header text alignment for mobile only

[sarahtodde]

Hello, I posted this under “Ask a question,” but I think I needed to post it here. 

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

[Weaver]

Since you are using the pre-header injection area, you have full control over the html.

Since it seems you are already able to handle some custom CS, please note these “helper” classes automatically provided by the theme to help handle custom layout for mobile devices:

is-desktop – prefix selectors to make rules apply on specific devices
.is-mobile (either small-tablet or phone)
.is-smalltablet – note: many phones will be considered smalltablet when in landscape view
.is-phone – usually when in portrait mode only
.is-ios – an iOS device: iPhone, iPod, iPad
.is-ipad – an iPad
.is-ipod – an iPod
.is-iphone – an iPhone
.is-android – any Android device
.is-windows – any Windows OS
.is-macos – any Mac OS

So you can wrap any part of your own pre-header with a class to control layout. For example, your image could be:

<img class=”mylogo” src=”http://carolinainsurancesolutions.com/wp-content/uploads/2015/06/CIS_logo_transparent.png”&gt;

And then define a Custom CSS

.mylogo {text-align:left;}
.is-mobile .mylogo {text-align:center;}

(I DID NOT TEST THOSE)

and wrap the address in class with similar custom css.

[scrambler]

Please don’t double post….

I answered in your other threads

[sarahtodde]

Thanks Weaver, that solution worked! Sorry about the double post, I thought it was posted in the wrong place since it said “ask a question” was for plugin questions. 

[Author]

Posts