[FIXED] How can I activate the CSS code in Chrome

Issue

I am using OpenCart 3.0.3.8. The eshop is https://morrisdirect.co.uk At the end of the stylesheet.css file, I added the following CSS code:

@media all and (min-width: 900px) {
    .container-two-columns {
    }
    .columns-two-columns {
       column-count: 2;
       column-gap: 0.3em;
    }
}

I am calling this CSS code from the homepage (and some more pages) to put the (below the slider) pictures next to each other. It is running perfectly in desktop Firefox and Opera, but it is not running in Chrome.

Can you help me please? :)

Solution

You need to make the <a> elements block elements for this to work:

@media all and (min-width: 900px) {
    .columns-two-columns {
       column-count: 2;
       column-gap: 0.3em;
    }
    .columns-two-columns > a {
        display: block;
    }
}

You don't need the:

.container-two-columns {
    }

Since it's not doing anything.

Answered By - disinfor

Answer Checked By - Candace Johnson (PHPFixing Volunteer)