Home Forums Weaver Xtreme Theme Change pre header text alignment for mobile only

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #17962
    sarahtodde
    Participant

    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

    #23011
    Weaver
    Keymaster

    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.

    #23012
    scrambler
    Moderator

    Please don’t double post….

    I answered in your other threads

    #23013
    sarahtodde
    Participant

    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. 

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.