New to the community? Start here

CSS float left element "hopping" when height changed

Hi, here: http://staging.kybernaut.cz/cafeplechac/?product=sestav-si-salat
If you select some extra ingrediences the product quantity select is displayed and sometimes all elements are pushed down and sometimes to the side. How to fix it? The best would be push the whole row under it down, if not possible make it like masonry grid would be ok.

Thanks in advance

  • Adam Czajczyk

    Hello Karolina,

    I hope you're well today and thank you for your question!

    That happens because when you expand the product (so the quantity shows up) its holding element is getting too high so it's moving other products below too.

    The simplest solution to this would be to define minimum height of an element by adding following CSS to the site:

    .bundled_product {min-height:280px;}

    It will increase the "space" between rows but should ensure that no boxes would be moved regardless of whether the product is selected or not. In order to apply this code to your site you might add it to your child theme's "style.css" file (if you are using a child theme), to the theme's "Custom CSS" option (if there's such an option available) or via Simple Custom CSS plugin:

    https://wordpress.org/plugins/simple-custom-css/

    Best regards,
    Adam

  • Predrag Dubajic

    Hi Karolina,

    You can use media queries to set different min-height for different break points.

    For example something like this:

    @media only screen and (min-width: 768px) {
    /* tablets and desktop */
    .bundled_product {
        min-height: 280px;
    }
}

@media only screen and (max-width: 767px) {
    /* phones */
    .bundled_product {
        min-height: 280px;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
    .bundled_product {
        min-height: 280px;
    }
}

    Adjust the values for each breakpoint and that should be it.

    Regarding "Custom CSS" you should recommed probably more using WP 4.7 field Custom CSS rather than adding additional plugin.

    Some themes disable WP default CSS field so we suggest multiple solutions as Adam mentioned above.

    Best regards,
    Predrag

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.