rtMedia slider animated gifs overlapping?

[AdamK]

Hi Guys

our testers have come back with any issues and there is really only a couple of things. Not really showstoppers.

So when I upload a series of animated gifs, they upload okay, and the activity slider displays them okay except a slight formatting issue. The gifs are overlapping somewhat. You can see in the attachment (and on the test site).

Is there a fix to get them spaced out properly?

Please let me know, many thanks 🙂

 

Attachments:

You must be logged in to view attached files.

[AdamK]

ps – I tested this in TwentySeventeen and it seems only Kleo has the slider. The other theme just lists the gifs down the page, so I am guessing this is a Kleo thing 🙂

[Laura]

Hello 🙂 Can you share access so i can take a look? I am sure with some css it will be fixed 🙂

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 🙂

[AdamK]

This reply has been set as private.

[Laura]

Hello, i see a fresh wordpress install, let me know 🙂

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 🙂

[AdamK]

Hi Laura

sorry about that – I have a couple issues with plugins from Buddyboss and I wanted to show them their plugin does not work in default themes too.

I have reactivated Kleo on the test site now. 🙂

[Laura]

Hello, maybe this helps, try adding it to style.css of child theme 🙂

COPY CODE

#buddypress .activity-inner .rtmedia-item-thumbnail {
    position: relative;
    width: 250px !important;
    height: 150px !important;
}

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 🙂

[AdamK]

Hi Laura

that’s great that seemed to do the trick thanks 🙂

[AdamK]

Hi Laura

sorry I spoke too soon 🙂

So – the gifs are now perfect.

Unfortunately the non-gifs image spacing has gone a little bit screwy. Now the normal images are overlapping a bit.

Have you got a bit more css for me?

Many thanks 🙂

[Laura]

Hello, maybe this helps a bit

COPY CODE

li.rtmedia-list-item.media-type-photo {
    width: 250px !important;
}
li.rtmedia-list-item.media-type-photo img {
    width: 250px !important;
}

Let me know 😀

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 🙂

[AdamK]

Hi Laura

thanks for the css.

That one seemed to break the autoslide animation though, not sure why.

In the end I went with this, it seems to work.

.rtmedia-item-thumbnail{
padding: 0 10px 0 10px !important;
height: 150px !important;
}

.rtmedia-list-item {
width: 275px !important;
}

.rtmedia-item-title {
width: 150px !important;
overflow:hidden !important;
}

Thanks for your assistance 🙂

[Laura]

Glad you could resolve it 🙂

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 🙂

[AdamK]

Hi Laura

I spoke too soon 🙁

Unfortunately the rtmedia-list-item is used in other places, and the css I did is messing with those other areas (e.g. media tab view).

I am not great at css, would it be possible to help me with a bit of css to better target the rtmedia-list-item on the activity page and not other places?

Hope you can help 🙂

[Laura]

Hello, does this help?

COPY CODE

.activity .rtmedia-item-thumbnail{
padding: 0 10px 0 10px !important;
height: 150px !important;
}

.activity .rtmedia-list-item {
width: 275px !important;
}

.activity .rtmedia-item-title {
width: 150px !important;
overflow:hidden !important;
}

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 🙂

[AdamK]

Hi Laura

that worked great, thanks for your help 🙂

[Laura]

Great 😀 glad it worked

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 🙂

[Author]

Posts