Home › Forums › Theme support › WP tables not responsive in Marea theme
Tagged: responsive table testamonial
This topic contains 9 replies, has 2 voices, and was last updated by 7Theme Support 9 years, 3 months ago.
-
AuthorPosts
-
I have added a table to a couple of pages (one example here: http://www.scoutsforest.com/the-house). You will see that the table doesnt resize. Can this be done? I could create it as image I suppose but it feels like the theme should be able to handle it.
Furthermore, testmonials on the homepage are also not resizing on a mobile (iphone5s) (seems to be set as a fixed width)?
Steve
Interestingly when you resize the browser (using Chrome v46) is resizes fine. Is this a Safari/iPhone issue?
It looks like your table is still to wide, thats why it cannot resize on small screens.
So I resized the table width to 320px (size of the screen on an iPhone5) and it didnt work. I even put the table in a 1/2 column (which did change the size on desktop but not on mobile view). Any suggestions?
And what about the testimonials on the homepage? This uses your default layout and the testimonial box/frame is cropped on the right.
No, the content of the table is still too wide / too much, you can insert every size you want, if the content is bigger than the choosen width it dont resize.
For the testimonials slider you are right, we try to find a fast solution for the problem.
Ok, found a solution for the testimonials slider. Please go to WP admin -> Appearance -> Theme Options -> General -> Extra Javascript content and add this javascript code:
jQuery(window).on( 'load resize' , function() { if(jQuery(window).width()<1050) { jQuery('.caroufredsel_wrapper').each(function(){ var liindex=jQuery(this).find('ul li').size(); jQuery(this).outerWidth(jQuery(this).parent().width()); jQuery(this).find('ul li').outerWidth(jQuery(this).parent().width()); }); } });
Thanks. Added that and cleared the caches, didnt seem to change anything. Testimonial box still gets cropped on the right.
Also and somewhat unexpectedly, adding that JS also removed the navigation bar at the top of the screen (on mobile). I removed the code, refreshed the screen and the nav bar reappeared. Added the JS again, and the nav bar disappeared. Can’t think why it would be affected int his way…
Sounds like a javascript error. Are you sure you’ve added all code from our last post? Because it’s tested on our demo website and there it’s working, you can test it…
I deactivated all plugins and cleared all caches. I reactivated all plugins one by one until all were reactivated and the nav bar is still there, so not sure what was happening. And the cropping is gone, so good progress thanks 🙂
However, seeing something else strange now this new JS has been added.
When you load the homepage, all the testimonals load in a larger size font, then the carousel slides and then “drops” into place. It doesn’t flow smoothly like in your demo.
Also, once the carousel has been round all testimonials once, the font size reduces, but the delayed motion stays. I dont see that in your demo on the iPhone and I havent touched the testimonal slider code from the default. I have deactivated all plugins, switched to another theme and back again, which also didnt fix it.
The only difference I can see between my environment and your demo is the carousel JS versio. Dont know if this makes a difference.
http://web-rockstars.com/marea/wp-content/themes/marea/script/jquery.caroufredsel.js?ver=3.8.11
http://www.scoutsforest.com/wp-content/themes/marea/script/jquery.caroufredsel.js?ver=4.3.1
My WP version is 4.3.1 and theme version 1.02.
I have left all plugins deactive so you can see it yourself. I can replicate this in Chrome, Firefox and IE when the browser windows are reduced to minimum width. It is also visible on an iPhone 5 and 6.
The js file is the same, WordPress just add the WordPress version to the url.
Sorry, but I cannot see the problem with the fonts, we’ve tested it in different browser.
-
AuthorPosts
You must be logged in to reply to this topic.