Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #428141

    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 8 years, 11 months ago by EricSmeets.
    #429027

    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

    #429215

    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 8 years, 11 months ago by EricSmeets.
    #429805

    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

    #429950

    Hello Elliott,

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

    Thanks!
    Case closed :D

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