Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 18, 2020 at 5:00 pm #1214072
    kodacurrie

    I have set 3 icon boxes up in 3 columns and made the columns “equal height” but when the content is different amounts of copy, the icon boxes are NOT equal heights. Help!

    May 19, 2020 at 9:13 am #1214233
    Guenni007

    Your setting is ok – but please remove the equal-height option for the columns.
    have a look here for more info on how to: https://webers-testseite.de/iconboxes-with-equalheight/

    May 20, 2020 at 5:18 am #1214494
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did you try that out @kodacurrie?

    Best regards,
    Rikard

    May 20, 2020 at 2:55 pm #1214678
    kodacurrie

    Yes, but the icon boxes still change height when the content length is different. I need them to stay the same height like Guenni007 example. I am not good with code so hoping I don’t need to do that!

    May 20, 2020 at 3:23 pm #1214689
    Guenni007

    That’s why I wrote it down like a recipe.
    The only thing i did not show explicitly is how to give a custom-class to the color-section:
    – open the options of the color section – click on tab “Advanced” and put in the input field “Custom CSS Class” the text ( allthough classes have on css a dot in front – enter here without that dot – it will be added by enfold )
    you see on the right side an image of the alb layout.
    On the left you see the code for the quick css. If you accept the prism script on my page you will have a copy button on top right.
    Thats all. I wouldn’t know how else to pass it on to inexperienced internet users.

    Edit : the solution is now private.

    May 20, 2020 at 10:34 pm #1214820
    kodacurrie
    This reply has been marked as private.
    May 22, 2020 at 5:26 am #1215156
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) {
.iconbox_top .iconbox_content {
    min-height: 250px;
}
}

    Best regards,
    Rikard

    May 22, 2020 at 3:53 pm #1215262
    kodacurrie

    Thank you, but that just made the boxes taller, but in responsive mode they still change to different sizes depending on how the copy reflows.

    May 24, 2020 at 7:39 am #1215648
    Rikard

    Hi,

    Try this as well, adjust the value to your liking:

    @media only screen and (max-width: 767px) {
.iconbox_top .iconbox_content {
    min-height: 300px;
}
}

    Best regards,
    Rikard

    May 26, 2020 at 3:32 pm #1216512
    kodacurrie

    This has the same issue. When site reacts responsively, the boxes become uneven heights as the text line breaks change.

    May 27, 2020 at 7:30 am #1216827
    Rikard

    Hi,

    I can’t access the page you linked to, please provide access to the site or a link to where we can see the elements in question.

    Best regards,
    Rikard

    May 27, 2020 at 3:22 pm #1216983
    kodacurrie

    This is the page. It’s the white icon boxes over the green bushes.

    Home

    May 27, 2020 at 5:58 pm #1217081
    Victoria

    Hi kodacurrie,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 480px) and (max-width: 990px) {
    .iconbox_top .iconbox_content {
        min-height: 300px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 2, 2020 at 3:44 pm #1218789
    Guenni007

    That’s just a tangled web.
    Another way to achieve this and in your case where it is now suddenly possible to publish the page link, the only chance is to imitate the iconbox.
    Because you like to have an image background with heading on top. Then flex layout will not work properly.

    Enfold provides the tools to give columns the same height. So why not use this tool to create an iconbox.
    We just put the iconbox in the column like you did, but give the iconbox a transparent background and no border!
    To have now a look-alike iconbox we can shift the whole iconbox over the top-border of the column.
    The rest is a bit of Enfold styling options : background-color, border, and border-radius etc.

    You can see here what is the trick at the bottom – you see the iconboxes that are with different height.
    But if you make them transparent and shift it to the top they will look like iconboxes.

    See here: https://webers-testseite.de/equal-height/
    Solution is in Source-Code ;)

    give to the columns or to a parent-container a custom-class f.e: equalboxes

    /**** play a bit with the shift values ***/
.equalboxes .iconbox.iconbox_top  {
	position: relative;
	top: -100px;
	margin-bottom: -100px;
	padding-bottom: 60px;
	background-color: transparent !important;
}

/**** maybe for buttons to have them on the bottom ***/
.equalboxes .avia-button-wrap.bottom-button {
	position: absolute;
	bottom: 0;
	right: 10px;
}

/****** media-query depends on your breaking-point for responsive layout ************/
@media only screen and (max-width: 767px){
	.equalboxes {
	   margin-bottom: 80px !important;
	}
}
    June 2, 2020 at 4:05 pm #1218793
    Guenni007

    by the way: why is the right column set smaller than the others?
    : there you have on that column set :

    Element {
    padding: 0px 10px 0px 10px;
    border-radius: 0px;
}

    On the others not !

    June 3, 2020 at 8:42 am #1218962
    Rikard

    Hi,

    Thanks for sharing and for helping out @guenni007 :-)

    Best regards,
    Rikard

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