Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1113595

    Hi,

    I’m running into a lot of issues, when trying to get my website to look nice on iPads. My website is built largely with Grid Rows, which looks good on desktop and mobile, but on iPad, it looks awful, I tried styling with ID’s on the Grid Row, but I can’t seem to fix it the right way. I’m looking for some CSS, that will do this:

    1) When viewing in landscape-orientation, I need ALL Grid Row-cells to follow another set of padding values, than the one I’ve entered in the Grid Row-settings. If possible, I would like to define these individually for 1-2-3-4 and 5-cell grids. Alternatively, the cells should stack vertically, like they do on mobile screens, and still have another set of padding values defined (so they center the cell-content properly).

    2) When viewing in portrait-orientation, ALL Grid Row-cells should stack like they do on mobile screens, and another set of padding values for the cells may be necessary here as well.

    3) Make the mobile burger menu appear when viewing in portrait-orientation. I got it working for landscape, but the CSS doesn’t work when changing min- and max-width to match portrait screen size.

    I hope you can help.
    Thanks for a fantastic theme. :-)

    Best regards,
    Alex

    #1113827

    Hi Alex,

    Could you post a link to your site so that we can have a closer look please?

    Best regards,
    Rikard

    #1113871

    Hi Rikard,

    I’ve posted some links and info in the private content box below.

    I have a fourth question:
    If I change a Main Menu item to a fold out a Mega Menu, is it possible to insert clickable images below the mega menu, fx by using widget areas or Content Views-plugin? Suggestions are welcome. Check private content for link to an example of what I am trying to describe. :)

    Looking forward to hearing from you.

    Best regards,
    Alex

    #1114991

    Hi,

    Thank you for the update.

    is it possible to insert clickable images below the mega menu,

    You can actually add an image directly in a menu item. Here’s how:

    // https://kriesi.at/documentation/enfold/mega-menu/#add-images-to-mega-menu

    Best regards,
    Ismael

    #1115493

    Hi, Ismael,

    Thanks for your reply, it seems to do the trick.

    Looking forward to your reply on the other questions in this thread. :)

    Best regards,
    Alex

    #1115871

    Hi Alex,

    Which questions are still unanswered?

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    #1115933

    Hi VIctoria,

    Please check my first entry on this thread. question 1-3 still remain unanswered. Never got a reply from Rikard.

    I’ve submitted a few links in the private content box. They lead to two screenshots showing the issues in questions 1-3. I’ve done my best to illustrate the trouble I’m having getting the website to look good on iPad. I hope it clarifies the difficulties, I am trying to adress. :-)

    Looking forward to your reply.

    Best regards,
    Alex

    #1116263

    Hi Alex,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width:768px) and (max-width: 1100px){
        #top .av-layout-grid-container .no_margin.av_one_half {
            padding: 5vh !important;
        }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1116609

    Hi Victoria,

    Thanks for the reply, this code solved issue 1 with padding in landscape-view on iPad. :)

    Can you please provide some CSS, that will solve issues 2 and 3 on screenshot no. 2 as well? I’m still struggling with the portrait-view on iPad.

    Yes, I would also like the rulers’ vertical space decreased.

    Thank you,

    Best regards,
    Alex

    #1116913

    Hi,

    We tried to check the page again but the password is no longer valid. (see private field)

    Thank you for the update.

    Best regards,
    Ismael

    #1116947

    Hi Ismael,

    Sorry about that. Not sure why, but I’ve changed the password, and submitted it in private data below.

    Please try again.

    Best regards,
    Alex

    #1117312

    Hi,

    Thanks for the update.

    2.) Edit the grid row element, go to the Screen Options and set the “Fullwidth Break Point” to the second option. That should force the cells to stack above each other on tablet and phone view.

    3.) Go to the Enfold > Main Menu > General panel. Set the “Menu Items for mobile” to the second option (Activate for smartphones and tablets). That should enable the mobile menu on tablet view — either landscape or portrait mode.

    Best regards,
    Ismael

    #1119079

    Hi Ismael,

    Thanks for your reply, this is working for me now. :-)

    You can close this thread now. Thanks for all your help.

    Best regards,
    Alex

    #1119345

    Hi,

    Great! Glad we could help. Please don’t hesitate to open a new thread if you need anything else.

    Have a nice day!

    Best regards,
    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘change all grids behaviour on iPad’ is closed to new replies.