Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 26, 2022 at 9:19 pm #1337366
    sky19er

    I just noticed what seems to be an issue with enfold’s four column css in tablet views — looks to me like it’s set to break after the second column, but the columns are still set to 25%, leaving 50% right margin in the body area. Please check out these screenshots and let me know what you think. You can check the page, too, but I’ll be adding some custom css to change the column widths to 50% for those views in the meantime.

    Home

    https://prnt.sc/26jr5ga
    https://prnt.sc/26jr4zq

    Thanks and lmk if you have any questions.

    January 27, 2022 at 5:43 am #1337403
    Rikard

    Hey sky19er,

    Thanks for the screenshots, I can’t see that happening on your actual site though, did you manage to find a solution?

    Best regards,
    Rikard

    January 27, 2022 at 5:56 am #1337405
    sky19er

    Right, yes, I used custom css to set the column widths to 50% for those tablet views — I was just curious whether or not this is a known issue. I’m not sure what other sites I’ve built might be suffering from this issue, so I’m hoping — if it is indeed a mistake in the coding — that it’ll be fixed in an upcoming release.

    January 27, 2022 at 9:03 am #1337429
    Rikard

    Hi,

    Thank for that update. It’s not a know issue, so we would need to see the actual problem. Maybe you could create a test page?

    Best regards,
    Rikard

    January 27, 2022 at 9:39 am #1337437
    sky19er

    Sure thing — here you go: https://abodecommunities.org/test-2/

    January 28, 2022 at 4:48 am #1337606
    Rikard

    Hi,

    Thanks for that. I see that the correct CSS is there, but it’s not applying for some reason. Did you try to clear the old CSS and JS files under Enfold->Performance?

    Best regards,
    Rikard

    January 28, 2022 at 9:13 am #1337636
    sky19er

    What correct CSS are you referring to? I’m seeing the same css I sent you in the first screenshot, with 25% columns and clear:both in the third column: https://prnt.sc/26jr4zq — Anyway, I did just try what you suggested and it didn’t seem to change anything. Thanks and lmk if you have any other questions.

    January 28, 2022 at 11:56 am #1337686
    Rikard

    Hi,

    I’m referring to the CSS in the screenshot in private, that is what should be applying, but the desktop CSS which you pointed out in your screenshot is applying instead. I’m not sure why that is unfortunately, since it’s working when I try it out on a test installation.

    If you need further help with this, then please provide login details in private, so that we can try to copy your shortcodes to a new page or to a test installation.

    Best regards,
    Rikard

    January 29, 2022 at 9:17 pm #1337857
    sky19er

    Is that the desktop css, though? The clear:both in the third column — as shown in my screenshot — would seem to indicate that it’s meant for mobile, and just the column width percentage is wrong, no? Seems like kind of a hybrid. Anyway, I’m including credentials for our dev site, where i’ve already disabled my custom css — you can test using the home page there. Thanks and lmk if you have any other questions!

    January 30, 2022 at 4:50 am #1337890
    Rikard

    Hi,

    Thanks for that. This problem seems to happen only if the columns are set to have no margin, I’m not sure if this is a bug or not, but I’ll investigate further. In the mean time, please try this CSS:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div {
    clear: initial;
}
}

    Best regards,
    Rikard

    January 30, 2022 at 7:56 am #1337899
    sky19er

    Ahh, OK — thanks for narrowing it down to that! The css you provided doesn’t seem to work for me, but I’m ok using the css I had already implemented, unless you see a problem with this:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
  #top.home .no_margin.av_one_fourth {
      width: 50%;
  }
}
    January 31, 2022 at 5:06 am #1337969
    Rikard

    Hi,

    I don’t see a problem with the CSS you are using, as long as it’s working :-)

    I’ll let you know here once we have a permanent solution for this.

    Best regards,
    Rikard

    January 31, 2022 at 8:15 am #1337996
    sky19er

    Great, thanks!

    January 31, 2022 at 11:03 am #1338011
    Ismael

    Hi,

    No problem. Glad we could be of help. Please feel free to open another thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘4 column layout issues on ipad’ is closed to new replies.