Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 10, 2024 at 11:00 am #1433882
    ausgesonnen

    Hi,
    please send css for following problem: There are 3 cells in the flip box grid. When the window is wide it is ok. But when it is smaller then the cells overlap. This is because before it reaches breaking point and the images are aligned vertically, they briefly move on top of eachother. See here: https://ibb.co/7t748SZ

    This looks particularly bad in the mobile version on some mobile phones with larger screens.

    Please send CSS so I can adjust breaking point.

    February 10, 2024 at 11:36 pm #1433959
    Mike

    Hey ausgesonnen,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 1190px) {
#top .avia-icongrid.av-flex-cells.av-break-989 .av-icon-cell-item {
    flex: 1 1 100%;
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 12, 2024 at 9:34 am #1434063
    ausgesonnen

    Thanks Mike. Much better. One last thing about this: The 3 cells could make better use of the widths of the window. There is a lot of space on the left and right. I tried to adjust the padding but it doesn’t seem to make a difference either way.

    Please send CSS to space out the boxes more and reduce margins left and right.

    Thank you.

    February 12, 2024 at 10:43 am #1434072
    ausgesonnen

    in addition to my request above I just noticed another thing on the mobile view. The spaces between the cells vertically is very large. How to make them smaller?

    February 14, 2024 at 11:57 am #1434278
    Mike

    Hi,
    Thank you for your patience, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .responsive #top #av_section_4 .container {
	width: 100%;
}
@media only screen and (max-width: 767px) { 
	#top #av_section_4 .avia-icongrid .av-icon-cell-item .avia-icongrid-flipback {
		padding: 0 3em;
	}
	.avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front .avia-icongrid-inner, .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback .avia-icongrid-inner {
		padding: 0 3em;
	}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 14, 2024 at 8:43 pm #1434331
    ausgesonnen

    Ok much better on mobile. However now the breakpoint on desktop is too wide. The icons get vertically aligned a bit too soon.

    February 15, 2024 at 12:03 pm #1434391
    Mike

    Hi,
    The first css above is what sets the breakpoint:

    @media only screen and (max-width: 1190px) {
#top .avia-icongrid.av-flex-cells.av-break-989 .av-icon-cell-item {
    flex: 1 1 100%;
}
}

    feel free to adjust to suit your needs

    Best regards,
    Mike

    February 26, 2024 at 10:26 am #1435411
    ausgesonnen

    Thank you. That works fine now.

    February 26, 2024 at 11:48 am #1435421
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Breakpoint for Flipbox Grid to be set to lower.’ is closed to new replies.