Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 14, 2015 at 11:45 am #428141
    EricSmeets

    Hello, I have been designing my website for a while now with the Enfold theme and testing it on various devices.
    It works very good on pc’s and phones, but tablets seems to be a problem on various occasions. ( I tested on an Ipad, but I presume the problem occurs on all tablets.)
    I made some screenshots on an Ipad in portrait mode and you can see them here:

    http://www.ericsmeets.nl/temp/IpadScreen-001.png
    Website link: http://www.ericsmeets.nl/testserver/
    ( The testimonial part looks ugly on portrait mode.)

    http://www.ericsmeets.nl/temp/IpadScreen-002.png
    Website link: http://www.ericsmeets.nl/testserver/
    (The page is here not so important. The menu is cut-off)

    http://www.ericsmeets.nl/temp/IpadScreen-003.png
    Website link: http://www.ericsmeets.nl/testserver/cursussen
    (lots of parts are not looking good.)

    http://www.ericsmeets.nl/temp/IpadScreen-004.png
    Website link: http://www.ericsmeets.nl/testserver/portfolio
    (Cut-off text)

    All the problems occur when I turn the tablet to portrait mode. I understand that when using the menubar to the side I decrease the available space for the rest of the content. So I see a few solutions to this problem and was wondering what you think.

    1) Is there a way to change the menu position to the top of the screen only for tablets or only for tablets in portrait mode. This will increase the available space for the rest of the content.

    2) Can I use the way the menu looks on a smartphone as well on a tablet? This will increase the available space for the rest of the content as well.

    3) If I view the website on a smartphone most of the content is displayed underneath each other instead of next to each other. Imo this would benefit the tablet (in portrait mode) as well. Because if you look at screenshot 001 for example it looks ugly. On a smartphone however the content is displayed underneath each other with just one column and looks way better.

    So this a pretty long list and suggestions. Hope this will help you develop your template as well and I am looking forward to your suggestions.

    Kind regards,
    Eric.

    • This topic was modified 9 years, 8 months ago by EricSmeets.
    April 15, 2015 at 4:28 pm #429027
    Elliott

    Hi EricSmeets!

    Add this to your custom CSS.

    .avia_mega_div {
  width: 250% !important;
}
@media screen and (max-width:800px) {
.flex_column { width: 100% !important; }
}

    You may need to increase the 800px part.

    Regards,
    Elliott

    April 15, 2015 at 8:42 pm #429215
    EricSmeets

    Thanks Elliott, that’s much better. However the following problem still occurs: (It also happens on a Samsung Galaxy Tab 10.1)

    http://www.ericsmeets.nl/temp/IpadScreen-002.png

    Website link: http://www.ericsmeets.nl/testserver/
    (The page is here not so important. The menu is cut-off)

    Any idea?
    Greetings,
    Eric.

    • This reply was modified 9 years, 8 months ago by EricSmeets.
    April 16, 2015 at 6:34 pm #429805
    Elliott

    Hey!

    Did you add this part? 

    .avia_mega_div {
  width: 250% !important;
}

    I don’t see it in the source code. Add it to the top of your Quick CSS field to make sure none of your other CSS is causing problems from typos.

    Best regards,
    Elliott

    April 16, 2015 at 10:53 pm #429950
    EricSmeets

    Hello Elliott,

    It works! I placed this Custom CSS part on top and now it works!

    Thanks!
    Case closed :D

    • This reply was modified 9 years, 8 months ago by EricSmeets.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Tablet compatibility of the Enfold theme’ is closed to new replies.