Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 26, 2023 at 11:54 am #1402535
    Monika

    Hey there,

    I used this code I found in the documentary for showing 6 rows, but the content does not center correctly.
    the margin to the left ist bigger than to toe right.
    Do you know where the problem is?

    #av-extra-columns .column-top-margin {
margin-top: 0 !important;
}

#av-extra-columns .flex_column {
width: 14%;
flex-basis: 14%;
margin-left: 2%;
margin-top: 20px!important;
}

#av-extra-columns .flex_column.first {
clear: none!important;
margin-left: 2%;
}

/* Two columns in mobile */

@media only screen and (max-width: 768px) {
#av-extra-columns .flex_column {
margin-bottom: 20px!important;
margin-top: 20px!important;
/* Width of the container */
flex-basis: 40%;
}

#av-extra-columns .flex_column:nth-child(even) {
margin-left: 10%!important;
}
}
    March 26, 2023 at 8:32 pm #1402566
    Mike

    Hey Monika,
    Thank you for the link to your site, Try this CSS instead:

    #main #av-extra-columns .column-top-margin {
margin-top: 0 !important;
}

#main #av-extra-columns .flex_column {
width: 16%;
flex-basis: 16%;
margin: auto;
margin-top: 20px!important;
}

#main #av-extra-columns .flex_column.first {
clear: none!important;
margin: auto;
}

/* Two columns in mobile */

@media only screen and (max-width: 768px) {
.responsive #top #wrap_all #av-extra-columns .flex_column {
margin-bottom: 20px!important;
margin-top: 20px!important;
margin: auto;
flex-basis: 44%;
}
.responsive #top #wrap_all #av-extra-columns > .container {
width: 100%;
max-width: 100%;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 28, 2023 at 11:09 am #1402753
    Monika

    Thank you Mike.

    I just put the code inside and now there are no margins between the columns and in mobile version there arent two rows next to each other any more.
    And now the whole block has more space to the right than to the left.
    So i think in general the old Code was a bit more what I was looking for, just centered.

    Do you think I could take the old code and just adjust a small part?

    March 28, 2023 at 11:57 am #1402769
    Mike

    Hi,
    Please try adding this css:

    #av-extra-columns .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}

    If this still doesn’t help then please include an admin login in the Private Content area so we can be of more assistance.
    Please see the expected results screenshots in the Private Content area.

    Best regards,
    Mike

    March 28, 2023 at 12:24 pm #1402778
    Monika

    Great Thank you Mike!
    That works now!

    March 28, 2023 at 6:53 pm #1402810
    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 6 posts - 1 through 6 (of 6 total)
  • The topic ‘6 rows are not centered – too much space left side’ is closed to new replies.