Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 24, 2018 at 9:26 am #1013520
    stevegjacobs

    Hi
    I am using Enfold on a website where my customer most often looks at it on an iPad. We worked hard to get the layout the way she wanted it on both desktop and mobile phone, but somehow on her ipad the layout always looks stuck partway in between, showing extra elements or hiding importing elements of the page. This is particularly the case in the footer. For desktops, I have a three column layout with an small image left and right and a custom html widget in the middle column. For mobiles and tablets, I turn off those three widgets and display only one that contains a custom html widget and displays a different image at the bottom. In the ipad, sometimes it shows only the middle column from the desktop version (no images), and sometimes it shows both desktop and mobile widgets in a layout that is all over the place.
    I think that what needs to happen is that the screen width where the transition happens between desktop and tablet needs to be increased. I’m not sure how to do this in custom css.

    Thanks
    Steve Jacobs

    September 24, 2018 at 7:13 pm #1013760
    Victoria

    Hey stevegjacobs,

    Could you please attach some screenshots of the issue? Seems to switch fine on my end.

    Best regards,
    Victoria

    September 25, 2018 at 2:46 pm #1014201
    stevegjacobs
    This reply has been marked as private.
    September 25, 2018 at 6:42 pm #1014372
    Victoria

    Hi Steve,

    Thank you for those, however, images do not get duplicated on my end in Chrome and Safari on a Mac.

    Which browser are you working in?

    Best regards,
    Victoria

    September 26, 2018 at 9:05 am #1014590
    stevegjacobs

    There should have been 4 screenshots from Chome on a chromebook, and 3 photos taken of the screen on an ipad. The only thing I’m concerned about really is the ipad. The owner of Danker antiques uses that iPad. I was in a phone shop yesterday and tested the site on several ipads and samsung tablets, and there were no issues. I don’t have an ipad or any apple product.
    I just tried changing sizes in Chrome, Firefox and MS Edge on Windows and at one point as I’m shrinking the browser, the right and left images disappear in the footer before it makes the switch to the mobile version of the footer. This happens at about 740 pixel wide screen. It switches to the mobile version at 712 pixels. My guess is that their ipad screen in portrait mode is somewhere in between those widths. If we could get it to switch to mobile version at 740 or so, it might solve the problem.

    September 26, 2018 at 7:45 pm #1014962
    Victoria

    Hi stevegjacobs,

    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 screen and (max-width: 768px) and (min-width: 737px) {
  body #custom_html-5.extendedwopts-hide.extendedwopts-tablet {
      display: block;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.