Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 11, 2018 at 2:20 pm #1008409
    steviger

    Hi guys,

    For some reason, my client wants to have a 10 column layout in order to present the team. I managed to make a “standard” 5 column layout with per column a shortcode:

    [av_one_half first av_uid='av-uzoqb']
<p style="text-align: center;">[av_image src='http://www.xlconcept.eu/newsite/wp-content/uploads/2018/05/placeholder_man.png' attachment='440' attachment_size='full' align='center' styling='circle' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-rhj2b' admin_preview_bg=''][/av_image]</p>
<p style="text-align: center;"><strong>Team Member</strong>
Account Director</p>
[/av_one_half]

[av_one_half av_uid='av-1wntv']
<p style="text-align: center;">[av_image src='http://www.xlconcept.eu/newsite/wp-content/uploads/2018/05/placeholder_man.png' attachment='440' attachment_size='full' align='center' styling='circle' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-rhj2b' admin_preview_bg=''][/av_image]</p>
<p style="text-align: center;"><strong>Team Member</strong>
Account Director</p>
[/av_one_half]

    It does kinda work but I have one issue, maybe guys can help me with:
    As you can see, it now looks as 5 separate columns with 2 images inside. How can I reduce the margins between the 5 columns so that the space is evenly distributed?

    Best regards,

    Steven

    September 11, 2018 at 2:41 pm #1008415
    Dude

    Hey steviger,

    I’d recommend to set a custom class for your columns ( https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements ) – otherwise you can break the website layout.

    I.e. use the class “no_margin_column” (screenshot: https://screenshotscdn.firefoxusercontent.com/images/3116ae0d-98c9-42c7-8e00-6bb638fefd63.png ) and then add this code to your quick css field:

    
#top #wrap_all div .av_one_fifth.no_margin_column {
    margin-left: 1%;
    width: 19.0%;
}

    Best regards,
    Peter

    September 11, 2018 at 3:25 pm #1008436
    steviger

    Thanks Peter! That does the trick.

    Cheers!

    Steven

    September 11, 2018 at 3:50 pm #1008442
    steviger

    Sorry to bother you but one more thing. When I make several rows, for some reason every first column has a padding. I just can’t figure out why.

    Best regards,

    Steven

    September 11, 2018 at 5:40 pm #1008471
    Guenni007

    or you take the grid-row and put in 2 1/2 Cells each 1/5 columns.
    If you like to have then the grid-row not full-width there are possibilities to get this via functions.php.
    See here ( for demonstration the 2 cells have a background-color: https://webers-testseite.de/10-columns/

    September 12, 2018 at 12:06 am #1008649
    Vinay

    Hi,

    I hope you have found the solution for this. If not please check this link

    Columns

    Adjust the width, margins and flex-basis value to achieve 10 columns.

    Best regards,
    Vinay

    • This reply was modified 7 years, 1 month ago by Vinay.
    September 12, 2018 at 11:39 am #1008860
    steviger

    Hi Guys,

    Thanks but I already fixed the 10 column layout (see previous posts). The only thing left is the padding issue every first 1/5 column.

    Regards,

    Steven

    September 13, 2018 at 4:25 am #1009183
    Rikard

    Hi Steven,

    Thanks for the clarification, this CSS seems to cause that:

    body .column-top-margin {
    margin-top: 50px;
}

    You could try this if you want to remove it on the page in question only:

    .page-id-494 .column-top-margin {
    margin-top: 0 !important;;
}

    Best regards,
    Rikard

    September 13, 2018 at 12:10 pm #1009345
    steviger

    Hi Rikard,

    Thanks for the code but unfortunately it doesn’t work. Perhapps it helps when I give you Admin access?

    Regards,

    Steven

    September 13, 2018 at 12:40 pm #1009359
    Dude

    Hi,

    I fixed it – I added this code to the quick css field:

    
#top .no_margin_column.column-top-margin {
    margin-top: 0;
}

    Best regards,
    Peter

    September 13, 2018 at 1:02 pm #1009370
    steviger

    Hi Peter,

    That works indeed! Thanks. I only need this for a particular section so when I give that content section a class named “team”,

    your CSS would be:

    #top .no_margin_column.column-top-margin .team {
    margin-top: 0;
}

    right?

    regards,

    Steven

    September 13, 2018 at 1:13 pm #1009374
    Dude

    Hi,

    I think the code would look like:

    
#top .team .no_margin_column.column-top-margin {
    margin-top: 0;
}

    because the section is wrapped around the columns.

    Best regards,
    Peter

    September 13, 2018 at 2:27 pm #1009407
    steviger

    Hi,

    Will give it a try. Thanks!

    Cheers,

    Steven

    September 13, 2018 at 2:48 pm #1009417
    steviger

    Works!

    Thanks for the support.

    September 13, 2018 at 2:56 pm #1009419
    Dude

    Hi,

    Great, glad I could help you :)

    Best regards,
    Peter

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘[SOLVED]10 column layout’ is closed to new replies.