|
Oguzhan Altun
|
March 30, 2015 at 4:34 pm
Hello,
Is there anyway to manipulate the events table view template so that there will be less columns when somebody visits the site with a mobile? The table’s current view is ok for a monitor but starts to create problems when visited with an iphone. Here is the link:
http://www.genevaphotoclub.com/
http://www.genevaphotoclub.com/dates-prices/
|
|
Josh
|
March 31, 2015 at 8:25 am
Hi Oguzhan,
We recommend using the footable version for mobile. You can set it to use the footable version by adding a shortcode parameter:
[ESPRESSO_EVENTS_TABLE_TEMPLATE template_file=”espresso-events-table-template-toggle.template.php”]
The documentation has a few screenshots that show examples of the footable template:
https://eventespresso.com/wiki/events-table-view-template-add-on/
|
|
Oguzhan Altun
|
March 31, 2015 at 10:23 am
Thanks Josh. How can I tell the WP to use a different template for mobile?
|
|
Lorenzo Orlando Caum
|
March 31, 2015 at 11:33 am
Hi, you could setup some media queries in your themes CSS file or via a plugin like Reaktiv CSS Builder or My Custom CSS that would hide / show a div based on the size of the screen in use.
Here are some examples:
http://stackoverflow.com/questions/17904018/show-hide-div-based-on-browser-size-using-only-css
http://stackoverflow.com/questions/11796297/div-show-hide-media-query
—
Lorenzo
|
|
Oguzhan Altun
|
March 31, 2015 at 4:25 pm
Hi Lorenzo,
I read through the examples, but I’m not sure how I can apply this to a specific column in the table view template? There are no div’s for each column in the template file?
|
|
Lorenzo Orlando Caum
|
March 31, 2015 at 4:38 pm
Hi, this is something that you would need to create. Here is an example:
http://jsfiddle.net/ozqj4gd5/1/
It works by checking the screen size and then hiding or showing the divs that have the shortcodes within them.
—
Lorenzo
|
|
Oguzhan Altun
|
April 5, 2015 at 7:07 am
Hi Lorenzo,
Many thanks for this reply. I created the mobile version of the template, inserted the html part of the code in a text container in WP, and inserted the CSS into custom CSS.
For some reason, the css filtering doesn’t seem to work for bigger screens. In a big screen, I see all three versions, but when I connect from my mobile it works fine and I see only the mobile version.
Any suggestions?
|
|
Oguzhan Altun
|
April 5, 2015 at 7:07 am
Here is the link:
http://www.genevaphotoclub.com/dates-prices/
|
|
Oguzhan Altun
|
April 5, 2015 at 7:27 am
Hello again,
I resolved the issue by adding another criteria for min-width. The issue was the retina display:)
@media all and (min-width: 960px) {
.ee-table-placeholder .one{display:block;}
.ee-table-placeholder .two{display:none;}
.ee-table-placeholder .three{display:none;}
}
Thanks anyway!
|
