-
Posts
-
Hi Kriesi,
First off, I’m a big fan. Your Enfold theme rocks! Even though I’m a WordPress newbie, I was able to get it working/running with relatively little stress. That said, when I test my page; http://www.pctuneupcenter.com on mobile phones and tablets, it doesn’t render properly. Have you got any idea why? [When I first installed the theme, it worked on my phone, so it must be something that I have done]. Is it the Tablepress plugin that’s causing the problem, or might it be something else?
I’d be very grateful on any insights you may have, as I’m completely stuck…
Hi,
Yes, I think it is the table press. It is not responsive. You might need to use Media Queries on custom.css.
Why do you need the plugin? You can achieve the same layout with the Table element.
Regards,
Ismael
Hi Ismael,
Thanks for the quick reply, it’s much appreciated. I’d very much like to use the Table element, but to do so is frankly a nightmare. . Due to WordPress’ ‘idiosyncrasies’, once I have posted HTML in the table builder, if I leave the editor, and go back, it’s torn to pieces. Do you know how to use HTML in the Table element without WordPress messing it up? [FYI I have tried the Raw HTML plugin, and it failed to do it’s job; once I left the editor it was all torn up again].
Do you have any suggestions on how to use effectively HTML in the Table element?
Also, and this is probably a stupid question,is there a plugin for Media Queries on custom css? [I’m not very familiar with css stuff].
Cheers.
James
Hi James,
You can try updating the theme files since you are still on 1.3.1 (newest version is available from your downloads on themeforest). There were some updates to the framework to help wordpress from modifying things within the advanced layout builder.
Ultimately however you may still have to find a third option that allows you to format the tables with html or a plugin and skip over the avia builder. Then make sure that plugin or html is responsive enough that it works for you.
With tables it is difficult because how do you make tabular data really respond properly to a much smaller screen? That is my hangup in trying to come up with a solution in this instance. The theme does some nice javascript trickery to clean them up and reformat them completely but with you needing to add in your own html those same tricks strip it out.
Regards,
Devin
Hi Devin,
Thanks for the help. I have updated the theme, and now the HTML issue is fixed. I have done some experimenting on a test page: http://www.pctuneupcenter.com/test_page/ to try and work out how to implement an alternative to Tablepress. Things aren’t as easy as I had hoped…
The table on the bottom of the test page renders fine on my laptop, but isn’t displayed properly on my smart-phone. [It’s broken into one continuous column]. How can I make the table display properly on a small screen like on my smart-phone? Is this possible?
Cheers.
James
Hi,
Please add this css to your /css/custom.css file OR to Quick CSS located in Enfold > Layout Styling… the text area at the bottom of the page
.avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
height: 125px !important;
}
@media only screen and (max-width: 980px) {
.avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
height: 175px !important;
}}
@media only screen and (max-width: 767px) {
.avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
height: 375px !important;
}}Your testimonials are causing the lower part of the page to jiggle and jump.. This stabilizes it.
—-
That table has got to go. Tables are for data like if you were to show how many people in each city of the world own this product, then you would use a table. Can’t use tables to prop up the page’s layout or the div design police will come.
Instead use an image gallery with small images option. Stick all 6 images in it, and add your text as a tooltip, be nice and animated and responsive as well.
looks good on small phones and rearranges itself properly
http://www.clipular.com/c?8224023=DSxT87g0svAM0J2q6Wht60Q9MVc&f=.png
this is how I added the gallery with these settings
http://www.clipular.com/c?8229018=MbJFLRKUz3IiwDSwA9oAq-z4iWI&f=.png
and here is where you set the tool tips that pop out
http://www.clipular.com/c?8233017=nsSMeYJCS6s_QuxnjVZsM-XlgDY&f=.png
Here is the css you will need to add to make the gallery look good on iphone and ipad.
@media only screen and (max-width: 980px) {
#top #wrap_all .avia-gallery-thumb a {
width: 25%;
}
}
@media only screen and (max-width: 767px) {
#top #wrap_all .avia-gallery-thumb a {
width: 31% !important;
}}Good luck,
Nick
Hi Nick,
Thanks for all your help. I have implemented the .css code, and the page no longer ‘jumps’ anymore! [That was really bugging me too]. With regard to the table, I have tried to make it work on a test page [http://www.pctuneupcenter.com/test_page/] but the graphics are ‘blown up’, and the gallery has a border which I don’t like. Is a .css edit required to fix these issues?
One other question; for the 2 tablepress tables, how would you replace these if you were me? I’m stuck as I don’t see an easy way through the Enfold tools…FYI I have tried to use the Enfold table on the test page [http://www.pctuneupcenter.com/test_page/], but on my smart phone this gets torn into one single column so it’s not much of a fix…Also, I’m not sure how to make the background white for the entire table…
Thanks in advance for your help!
Take care.
James
Hi,
I am not sure how else I can help you after showing you a way to do this. As I explained, tables are for tabular data and are not layout elements for images. If you are asking how do you make 6 columns and 1 row to become 3 columns and 2 rows on smaller screen sizes, I don’t think that is possible. My suggestion is to use a gallery since that is what is currently done. Here is a random theme to illustrate my point, about what you are trying to do with the table. http://themes.a-salah.com/bostan/new-home-2/
A border color can be easily changed with css.
Thanks,
Nick
- The topic ‘What have I done wrong?’ is closed to new replies.