Trying to move wordpress title on mobile only

Question

Currently trying to finish a Wordpress build but I've ran into a slight problem.

I'm using the following Jquery code:

jQuery( document ).ready( function ($) {
    var mobile = $(window).width();
    if ( mobile <= 680 ){
        $( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
    }
} );

So when the screen is less than 680px the class "product_title.entry-title" will be inserted before the "woocommerce-product-gallery" class. This basically moves the title ABOVE the product gallery on my product page.

BUT it's bugging me out because this code is only triggered every time the page is refreshed. So if I load the page and resize the browser nothing will happen until I refresh it. Is there any alternative method I can use to avoid this?

You can keep two titles one for mobile and other for more than 600px Viewport. Now control the display of the title using css media queries. No need of using Jquery. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — Partha Roy, Jan 30 '20 at 04:30
Media queries are definitely the correct solution here, as referenced above. However, to fix your current implementation you need to look at the `window.onresize` [event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event). And if using this event, you'll definitely want to use a debouncer too. — fubar, Jan 30 '20 at 04:32
I know I can use CSS media queries. But that would involve digging into my Wordpress theme and messing around with the layout. I'm trying to avoid touching any of the HTML. — user3599852, Jan 30 '20 at 04:34
[Media query](https://codesearchable.com/de/4832771/) is great solution for you. — Grey Chanel, Jan 30 '20 at 04:34
Just add the custom class on that section (which WP options allowed ) target that title using this class via media query, You don't need JS for that — Awais, Jan 30 '20 at 04:44

score 0 · Answer 1 · answered Jan 30 '20 at 04:38

Building off of @Partha Roy's comment you could use a media query like so:

.product_title.entry-title.mobile-only {
  display: block;
}
.product_title.entry-title.desktop-only {
  display: none;
}

@media (min-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: none;
  }
  .product_title.entry-title.desktop-only {
    display: block;
  }
}

Or in a non mobile responsive first strategy:

.product_title.entry-title.mobile-only {
  display: none;
}
.product_title.entry-title.desktop-only {
  display: block;
}

@media (max-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: block;
  }
  .product_title.entry-title.desktop-only {
    display: none;
  }
}

And of course you'll need two sets of HTML in positions where you want them.

<div class="product_title entry-title desktop-only">...</div>
<div class="product_title entry-title mobile-only">...</div>

You can refer to this similar question: How to show text only on mobile with CSS?

I know how to use Media Queries haha... My issue is that would require going into my Wordpress theme that I'm using and editing in some HTML. And I have no idea where to even start when editing theme files. Hence why I'm just looking for a quick Jquery solution. -- If I knew where to edit in my theme files, i'd just create another header and give it a mobile class. — user3599852, Jan 30 '20 at 04:39
You should refer to this answer for a good solution: https://stackoverflow.com/a/9828919/9339513 — Honest Charley Bodkin, Jan 30 '20 at 23:29

score 0 · Answer 2 · answered Jan 30 '20 at 06:31

You can use WordPress built-in “mobile detect” function wp_is_mobile to create a simple shortcode that can hide certain parts of your content from mobile visitors and-/or desktop visitors. The wp_is_mobile function returns true when your site is viewed from a mobile browser. Using this function you can create adaptive-/responsive WordPress themes based on visitor device.

For example,

<?php  if( wp_is_mobile()){  ?>
 // mobile stuff goes here
   <div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
   // desktop stuff goes here
   <div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php  } ?>

Trying to move wordpress title on mobile only

2 Answers2