-
AuthorPosts
-
August 7, 2018 at 11:48 am #994355
Hi,
Is it possible in the Mobile display- The image will appear above the text?
The whole site is rtl, but I need only the posts to appear from left to right on mobile
(I don’t want to change the desktop display and put the image to the right and text to the left )August 7, 2018 at 11:56 pm #994624Hey dinapost,
I wrote this script to work on the pages like the url in the Private Content area, and tested it on a couple of other pages, and it seems to work correctly.
Please test for yourself and let us know if you find any issues. For the logic I wrote it to only work on single posts that are rtl when the browser view is less than 766px wide.
When testing you may need to reload the page for it to work, which should be fine because mobile users don’t suddenly change their screen size, like you might do if testing on a desktop.
Try adding this code to the end of your functions.php file in Appearance > Editor:function switch_mobile_columns(){ ?> <script> $(window).on('load resize', function() { if ($(window).width() <= 766) { $(function() { $('#top.single-post.rtl_columns .post-entry .flex_column_div.first').insertAfter('#top.single-post.rtl_columns .post-entry .flex_column_div.el_after_av_one_half.el_before_av_one_half'); }); } }); </script> <?php } add_action('wp_footer', 'switch_mobile_columns');
Best regards,
MikeOctober 18, 2018 at 10:42 am #1023262Hi Mike,
I’ve added your code but nothing has changed :(On this page- https://www.idans.co.il/%D7%9E%D7%AA%D7%A0%D7%A4%D7%97%D7%99%D7%9D-%D7%9C%D7%94%D7%A9%D7%9B%D7%A8%D7%94-%D7%9B%D7%95%D7%9B%D7%91%D7%99%D7%9D/
on mobile, The image still appears below the text..October 18, 2018 at 1:14 pm #1023341Hi,
I notice you have a few jQuery errors, so I removed the code to try to resolve these errors first, and cleared your cache.function switch_mobile_columns(){ ?> <script> (function($){ $(document).ready(function(){ if ($(window).width() <= 766) { $(function() { $('#top.single-post.rtl_columns .post-entry .flex_column_div.first').insertAfter('#top.single-post.rtl_columns .post-entry .flex_column_div.el_after_av_one_half.el_before_av_one_half'); }); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'switch_mobile_columns');
Can we try disabling your plugins to find the error? Please print copies of your plugin settings in case the settings are lost when disabling the plugin.
Best regards,
MikeOctober 21, 2018 at 9:45 am #1024465You can disable the plugins.
Thanks alotOctober 23, 2018 at 3:29 am #1025215Hi,
Sorry for the late reply, I found that disabling “Autoptimize” fixes the jQuery errors and allows the function above to work correctly.
Please clear your browser cache and check, then try changing the settings inside “Autoptimize” to find the setting that was causing the issue for you.Best regards,
MikeOctober 23, 2018 at 10:02 am #1025292Hi Mike,
It still does not work perfectly well even though the plugin is off.
This does not work for all posts on the site.
Here it works:Here it does not work:
Here it does not work:
Maybe there’s another problem besides the plugin?
Thank you very much
October 23, 2018 at 11:56 am #1025358Another problem,
in posts that the code works, is that the post appears several times one after the other.
If you scroll down after the image and after the text- there is another text and another..October 25, 2018 at 5:30 am #1026191Hi,
I took a look at your pages and found none of the worked, and you had these jQuery errors
I assume “Autoptimize” is enabled?I may have found a new solution, Please try this code in the General Styling > Quick CSS field or WordPress > Customize > Additional CSS and clear your browser cache. I tested this on four of your pages and for mobile width it reversed the columns so the images were on top:
@media only screen and (max-width: 767px) { .entry-content-wrapper { display: flex !important; flex-wrap: wrap !important; } .flex_column.first { order: 2 !important; } .el_after_av_one_half { order: 1 !important; } }
Best regards,
MikeOctober 25, 2018 at 9:22 am #1026241It is excellent! Thank you very much!
October 25, 2018 at 5:16 pm #1026427 -
AuthorPosts
- You must be logged in to reply to this topic.