Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 9, 2014 at 4:53 pm #315976
    yavors

    Hi,

    I am trying to create 3 equal columns with 2 simple borders placed between 1 and 2, and between 2 and 3, where the borders would be placed in the middle between the columns. How is that possible with the current grid system where margins are placed only on one side of a column and I cannot add classes to columns?
    Thanks!

    September 10, 2014 at 12:49 pm #316480
    Yigit

    Hi yavors!

    Please add a color section element to your page with a custom ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
    then place your three 1/3 column elements inside it and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #your-custom-id .av_one_third { border: 2px solid red!important; padding: 5px; }

    If that does not help, please post a screenshot and show the changes you would like to make so we can make sure that we are on the same page :)

    Best regards,
    Yigit

    September 10, 2014 at 1:56 pm #316547
    yavors
    This reply has been marked as private.
    September 10, 2014 at 1:59 pm #316551
    Yigit

    Hey!

    Can you post the link to your website please?

    Regards,
    Yigit

    September 10, 2014 at 2:36 pm #316603
    yavors

    Working locally for now.
    But the concept is simple… 3 1/3 columns in a color section, need to have centered borders between them.

    September 10, 2014 at 2:43 pm #316613
    Yigit

    Hey!

    Please use following code instead

    #your-custom-id .av_one_third { border-right: 1px solid #888; padding: 5px; }
#your-custom-id .avia-builder-el-last { border: none !important; }

    Cheers!
    Yigit

    September 10, 2014 at 2:48 pm #316621
    yavors

    Again…
    The borders are not center aligned between the column cuz of the margin-left of the columns…

    div .av_one_third {
margin-left: 6%;
width: 29.333333333333332%;
}

    I don’t want to rewrite the grid system…

    September 10, 2014 at 2:58 pm #316627
    Yigit

    Hey!

    You can fix it with following code

    #your-custom-id .av_one_third { padding-right: 6%!important; }

    you may need to adjust those values.

    Best regards,
    Yigit

    September 10, 2014 at 3:00 pm #316629
    yavors

    NEvermind, fixed like this:

    @media only screen and (min-width: 768px) {

	#cats_section .el_before_av_one_third   { border-right: 1px solid #e6e6e6; padding-right: 3%; margin-left: 3%; }
	#cats_section .avia-builder-el-last { border: none !important; margin-left: 3%; padding-right: 3%;  }

}
    September 10, 2014 at 3:02 pm #316631
    Yigit

    Hey!

    Great! Let us know if you have any other questions or issues

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Bordered columns with equal widths’ is closed to new replies.