Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 2, 2020 at 10:19 pm #1189533
    Flow9999

    Hello,

    I tried the grid row with icon grid inside.
    However I have minor display issues with iPad resolutions (1024px screen width)
    I think the icon grid would need to be centered. If you take a look at the screenshot you will see that the right column with the icon grid has a blank side on the left, so it’s not correctly aligned center.
    Also I don’t want the font to overlap with the font of the following items from the grid.

    Thank you!

    • This topic was modified 4 years, 8 months ago by Flow9999.
    March 2, 2020 at 10:41 pm #1189534
    Flow9999

    Another issue with icon grid is on mobile resolutions I only get 1 item per row. I’d like at least 2 to be displayed :(

    March 5, 2020 at 8:59 pm #1190642
    Flow9999

    @support team: could you understand what i mean?

    March 6, 2020 at 11:19 am #1190815
    Ismael

    Hi,

    Sorry for the late response. We can adjust the width of the cells and create more space for the icon grid when the screen width is less than 1024px.

    @media only screen and (max-width: 767px) {
    #top .flex_column_table {
        display: block;
        width: 100%;
    }

    #top .flex_column_table_cell {
        display: block;
        width: 100% !important;
    }
}

    This will make the cells full width and they will stack on top of each other same as they do on mobile view.

    Best regards,
    Ismael

    March 6, 2020 at 3:18 pm #1190895
    Flow9999

    Thanks Ismael that idea of yours is very welcome,

    acutally my need for a fix was mainly for iPad resolutions 1024px screen width and maybe pc resolution 1152px width.
    So I adapted your code a bit:
    (max-width: 1152px) and (min-width: 989px)
    and changed width to 70%. Now I needed to center the columns and didn’t get the result with float and position:relative.
    So I remembered margin: auto auto and it worked.
    Because on other pages I did not want all of my columns to be full screen width, I used css classes to make it only adapt to the columns i want them to apply to. So in the end I am satisfied with the results for now. But it wouldn’t have been possible without your css code :-)
    In the end please forward my request to the developers once more to optimize responsive design also for iPads with 1024px screen width at least.
    I am sure there are more enfold users who may have problems with iPad optimization.

    Kind regards

    March 9, 2020 at 12:53 pm #1191480
    Ismael

    Hi,

    Happy to know that you managed to fix it on your own. Adding a few css code to tweak the elements on certain screen sizes is quite normal and necessary in certain cases such as yours where there are 3 columns of content (grid icons) inside half a cell. There just aren’t enough space in the cell to accommodate the items in the grid when viewed on a tablet view, so a css adjustment is needed.

    Another possible solution, without using css, is by setting the Grid Row’s Advanced > Fullwidth Break Point to the second option. This should should cause the cells to stack on top of each other when the screen width is less than or equal to 989px, creating more space for the icon grid element.

    Best regards,
    Ismael

    March 10, 2020 at 2:45 pm #1191850
    Flow9999

    Yes Ismael, you are right! Having a breakpoint option is very helpful indeed. However Enfold only supports it to be selectable for up to 989px. Thus, please forward to the developers, to add a third breakpoint option for iPads (1024px) Not for me, but for other Enfold users, who wish to optimize for Tablet and iPads

    March 11, 2020 at 7:10 am #1192161
    Ismael

    Hi,

    This is the css code that breaks the cells into a single column on tablet view.

    .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
    display: block;
}

    If you want to apply the breakpoint on iPad or on screens with 1024px screen width, just wrap the css inside a media query. Example:

    @media only screen and (max-width: 1024px) {
    .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
        margin: 0;
        margin-bottom: 0px;
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }
}

    This should display the cells as full width when the screen width is equal or less than 1024px.

    Best regards,
    Ismael

    March 13, 2020 at 12:26 am #1192806
    Flow9999

    Thank you very much Ismael! :-)

    March 13, 2020 at 8:00 pm #1192953
    Victoria

    Hi Flow9999,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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