0

My client reported an issue with me, which is flexbox not working on product card section on home page (WordPress site) https://hailinpower.com/

This is what it looks like on Chrome: screenshot:
screenshot

This is what it looks like on IE 11: screenshot on IE 11:
screenshot on IE 11

I've searched for solutions but I was not able to fix it. I tried to set a height: 589px to the flex container, also flex children div, but it didn't work...

I have added a custom CSS code to this section as below:

.home-page-row .kt-row-layout-inner .kt-row-column-wrap .wp-block-kadence-column .kt-inside-inner-col {

    display: flex;
    flex-direction: column;
    flex: 1;
}

This custom CSS code might be the reason that causes this issue?

Improve this question
2
  • Please share more details, like the code involved and your attempts to resolve the problem
    – Nico Haase
    Commented Apr 16, 2021 at 13:17
  • Hi Nico, it's designed with Ocean WP theme and Kadence Block, not my custom theme. And I have added this custom CSS code: .home-page-row .kt-row-layout-inner .kt-row-column-wrap .wp-block-kadence-column .kt-inside-inner-col { display: flex; flex-direction: column; flex: 1; }
    – Brandon Zhang
    Commented Apr 16, 2021 at 13:45

1 Answer 1

Reset to default
3

Change your custom css

.home-page-row .kt-row-layout-inner .kt-row-column-wrap .wp-block-kadence-column .kt-inside-inner-col {

display: flex;
flex-direction: column;
flex: 1;
}

flex: 1 to flex-grow: 1

I´ve done it on debug panel of IE11 and it worked, see the imagem below enter image description here

Improve this answer
9
  • Hi Vitor. Thanks for the answer. I tried that but didn't work though. Any other suggestions? Thanks!
    – Brandon Zhang
    Commented Apr 16, 2021 at 13:53
  • Ok. Thanks, let me try again real quick.
    – Brandon Zhang
    Commented Apr 16, 2021 at 14:02
  • Hi Gwon, you can use as well flex: 1 0 auto;
    – Vitor Martins
    Commented Apr 16, 2021 at 14:04
  • Hi Victor. Sorry about before. I didn't have any cache plugin installed on this site, and then I went to Cloudways to clear the cache and then refresh and it work like a charm. Thank you so so very much! Clearly I know nothing about flexbox ...:(
    – Brandon Zhang
    Commented Apr 16, 2021 at 14:16
  • No worries, I´m happy to help :)
    – Vitor Martins
    Commented Apr 16, 2021 at 14:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.