-
Posts
-
Hi there,
I just switched to the Enfold theme and I gotta say: it ROCKS! Thank you so much for creating such an awesome theme. It already works like a charm.
Just a few formatting/css questions related to viewing the site on a mobile device (link to the site so you can see live what I’m talking about: http://www.ferienwohnung24-garmisch.de)
1. Easy Slider: looks good on PC and tablet with captions, but on iPhone (and I presume on Androids, Windows Phone, etc as well), the captions take up the entire slider. Is there a way to disable captions for certain devices? The pictures are just too small on the phone, making the captions unreadable even if they were smaller. However, the captions are really useful on tablets and PC, so I wanna keep them.
2. I have my homepage set up in a way that it has a “tabs” and “acordion” text. On PC and tablets, clicking on the individual items works fine. When clicking on a different “tab” (the shortcode version, not the browser one) on a mobile device, the page will jump down (in this case all the way down to the “acordion” section, thus the user has to scroll back up to see the text he just clicked on). Do you know how I could fix this?
3. Headlines (h2): On iPhone, headlines that contain words longer than 9 characters (pretty common in German ;)) are not displayed correctly. Since the word is too long, only the first 9 characters are displayed and the rest gets omitted. Is there a way to change this?
4. Using the boxed version of the format, the margins on the left and right are quite large on a mobile, making the readable portion quite small. Is there a way to decrease these margins for mobile devices only?
5. Is there a way to eliminate the: “You are currently here: xyz” below the header menu?
Thank you so much for your time and effort. It is truly, truly, truly appreciated! :) :) :)
Cheers,
Fabian
1) Yes, you could use a css media query to hide the caption – eg insert following code into the quick css field
@media only screen and (max-width: 1000px) {
.avia-caption {
display: none !important;
}
}You can change the max-width value if you want to include/exclude different screen resolutions. At the moment screens with a screen resolution of up to 1000px won’t display the captions.
2) I noticed that the “jump distance” depends on the content length of the tab/accordion. Probably the expanded content shifts the other content elements down and this will also cause the view port to shift down. I’ll tag this thread for Kriesi and ask him to look into it.
3) Try following css code to fix the issue:
.template-page .entry-content h1, .template-page .entry-content h2, .template-page .entry-content h3, .template-page .entry-content h4, .template-page .entry-content h5, .template-page .entry-content h6 {
word-wrap: break-word;
}4) No, unfortunately this is not easily possible. You’d break the twelve column grid layout if you change the content width or margins and you’d need to completely rewrite the columns definitions in css/grid.css.
5) Open up functions-enfold.php and delete
if($breadcrumb) $additions .= avia_breadcrumbs(array('separator' => '/', 'richsnippet' => true));It would be great if you could look into this tab switching issue, which now also occurs on PCs:
If you follow this link:
http://www.ferienwohnung24-garmisch.de/#toggle-id-1
and then click on toggle number 2, the one right below, the screen jumps almost to the very bottom of the page, making the tab content unreadable.
I think the issue is caused by some unclosed html elements. Please fix them: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ferienwohnung24-garmisch.de%2F%23toggle-id-1&charset=%28detect+automatically%29&doctype=Inline&group=0
(you can ignore the other warnings/errors – they won’t affect the toggle script but “No p element in scope but a p end tag seen”, “Unclosed element span.” and “Stray end tag span.” requires a fix.
- The topic ‘Mobile issues: Easy Slider, Tabs and Acordions, Headlines’ is closed to new replies.