Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #571325

    Hello

    Am having an issue where some tables in 2 columns are overlapping and cutting off information when viewing on ipad in portrait.

    Could you advise on a fix please. The tables do display correctly on mobile screen size in portrait so not sure what the problem is.?

    Many thanks

    #571337

    Hey Chris!

    You are using an old version of the theme, so please upgrade to Enfold 3.4.7 and let us know if you still need help afterwards.

    Regards,
    Andy

    #571590

    Hi Andy

    I have updated my API key details and have installed the latest version of Avada via the update theme panel but the problem is still there…

    Any other fix?

    Many thanks

    #572292

    Hello – sorry to chase but did you manage to look in to this issue?
    Many thanks

    #574094

    Hi!

    refrain from bumping into your own thread, as it pushes it behind in our queue and marks it as answered and then we can’t provide a faster reply to you.

    you haves used a caching plugin, so activate it again and go into it’s settings and choose to switch off caching. Then deactivate this and all other plugins. Afterwards clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    #574499

    Hi Andy

    The cache plugin wasn’t enabled, I think it just comes as a recommend plugin. In any case I have followed your instructions and have even installed a new browser on the ipad (chrome instead of safari) to re-test it – the problem is still there.

    See this screenshot for error: http://www.thewhitehartufton.co.uk/wp-content/uploads/2016/01/winelist.png

    This only occurs when viewing in PORTRAIT on my ipad. Landscape is fine and also on mobile it switches to single column so no issues there either, only with portrait on tablet.

    Thanks

    #575165

    Hi!

    Please turn on the custom css class field then modify the two columns which contains the tables. Add a css class selector to both columns. Use “table-columns” for example then add this in the Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .table-columns {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    }

    Enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Ismael

    #576389

    Thanks Ismael,

    I finally found the correct functions.php file in: /wp-content/themes/enfold – the code I need to insert was actually just commented out at the bottom so just removed the \\ and saved which works and brings up the custom CSS field box.

    I have done what you suggested giving both columns the custom CSS name of “table-columns” – I have also added the following CSS in the Quick CSS box in Enfold/General Styling/Quick CSS

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .table-columns {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    }
    }

    It still doesn’t seem to solve the problem however – and I have cleared all my browser cache/cookies in chrome settings on the ipad that I am using and have reloaded. …. tables still overlap.

    Am I doing something wrong?

    Thanks

    • This reply was modified 8 years, 9 months ago by Beertank.
    #576887

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling to see if it works better than the previous solutions:

    @media only screen and (max-width: 850px) {
    .page-id-393 .av_one_half {
        width: 100% !important;
    }
    }

    Regards,
    Rikard

    • This reply was modified 8 years, 9 months ago by Rikard.
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.