Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile Conditional Tags
Tagged: conditional tags, mobile
- This topic has 5 replies, 2 voices, and was last updated 7 years, 11 months ago by carasmo.
-
AuthorPosts
-
April 5, 2016 at 10:53 am #183002jackirtMember
Hi all,
I'm using the conditional statement below to move my site title & description from the header to above the sidebar widget area. However, I need to specifically target the ipad in landscape orientation, as this orientation displays the sidebar. (I need to add this orientation to the else statement) Is there a conditional tag that specifically targets this?
//* Reposition Title Area if ( wp_is_mobile() ) { add_action( 'genesis_header', 'genesis_do_header' ); } else { remove_action( 'genesis_header', 'genesis_do_header' ); add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_title' ); add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_description' ); }
Thanks!
April 5, 2016 at 1:58 pm #183009carasmoParticipantWhy?
To answer your question, there is a plugin called Mobble which has classes that target devices. You can open up the plugin and see what classes you can use. Server side tech (which is what you are doing now) doesn't check orientation, that would be CSS or jQuery. Better with CSS and flexbox.
I would re-think why you are doing this. You can move content above or below with Flexbox (css) which most of the modern mobile browser will handle. There's many ways that are easier to reorder content. You can even hide the content where it is, clone it with jQuery, and appendTo the area, mixing jQuery and CSS media queries.
http://caniuse.com/#feat=flexbox
April 5, 2016 at 2:02 pm #183010jackirtMemberThis is just the best way for me to design my theme is all. The header gets in the way with the fixed sidebar, and the code I listed above works perfectly fine with how it's currently set up.
I was just wondering if there is a conditional tag for the ipad landscape, or if there is a way to target it with a width.
April 6, 2016 at 11:30 am #183060carasmoParticipantTo style for orientation and/or width ranges you would use CSS media queries.
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
April 6, 2016 at 12:58 pm #183064jackirtMemberYes I understand that.
I need a piece of code that goes something like this:
//* Reposition Title Area
if ( max-width 960px() ) {
add_action( 'genesis_header', 'genesis_do_header' );
} else {
remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_title' );
add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_description' );
}I can't add the add_action statements in CSS
April 6, 2016 at 4:36 pm #183074carasmoParticipantThere is nothing that I know of that detects server side orientation changes. You can detect device types with Mobble, not orientation. You can move things up and down with Flexbox in CSS and hide and show with regular CSS or you can clone chunks appendTo and so forth with jQuery. That's all I can think of.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.