Kleo Posts resizing with custom CSS

[ChefsConnection]

Hello again!

See attached screenshot.  Using the kleo_posts shortcode, I’m having a problem with the size of the displayed post in the laptop size range.  (Top left, Daily Bites section)  The column is automatically going to 33.3% width, but I want it to use auto width here to fill the container.

The following code is what is affecting the size.   Using developer mode in Chrome I can change the width to “auto” and see the desired results, but it doesn’t work when added to quick CSS.

@media (max-width: 1199px) and (min-width: 992px) .responsive-cols > *  {width: 33.3% !important}

Important to note that I only want to affect this one area on the home page.

Please help me solve this, it’s driving me crazy!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

This is how it looks for me by default

But if you still need to adapt the size on kleo posts but only there, you will have to add a specific class to the row that contains or directly to the Kleo Posts element from visual composer backednd(see screenhsot)

Then you will have this css rule

COPY CODE

@media (max-width: 1199px) and (min-width: 992px) {
    .responsive-cols.kleo-masonry.mycustomclassname {
        width: 50% !important;
    }
}

Or this one, test both, see what’s ok for you.

COPY CODE

@media (min-width: 992px) {
    .responsive-cols.kleo-masonry.mycustomclassname {
        width: 50% !important;
    }

}

Change the width as you need.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[ChefsConnection]

Thanks Radu! I was able to make it work, but I had increase the width to 300% instead of auto for that size range.

[Radu]

Hi,

Sorry I’ve made a mistake those are correct css selectors

COPY CODE

@media (max-width: 1199px) and (min-width: 992px) {
	.responsive-cols.kleo-masonry.dailybites article {
	    width: 100% !important;
	}
}
Or this one, test both, see what’s ok for you.

—

COPY CODE

@media (min-width: 992px) {
	.responsive-cols.kleo-masonry.dailybites article {
	    width: 100% !important;
	}
}

Let me know
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[ChefsConnection]

This code works as intended. Thanks Radu!

COPY CODE

@media (max-width: 1199px) and (min-width: 992px) {
    .responsive-cols.kleo-masonry.dailybites article {
        width: auto !important;
    }

}

Interestingly, this code gets the same result but I’m sure it’s not the right way to do it.

`@media (max-width: 1199px) and (min-width: 992px) {
.responsive-cols.kleo-masonry.dailybites {
width: 300% !important;
}

}

[Radu]

Hi,

Great,

Yes but the second it’s ok to use

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts