[Resolved] views display is changing in my slider using divi

[Author]

Posts

[ericW-5]

I set up a row in divi where i can display 3 modules, each one is a slider displaying a view with featured jobs or offers.
page is hidden link

The first series of 3 items is ok but when the sliders change to the 2nd item, everything goes mad and especially the font size is quite bigger and the next row is sent to the right of the screen...

How can I solve this ?
Thanks

[ericW-5]

the problem is visible on 2 sections of the page hidden link : 'emplois à la une' and 'candidats à la une'

Thanks in advance
Eric

[Christian Cox]

Hi, I'm running some tests on the site now so you may see content disappear momentarily. I'll update you soon.

[ericW-5]

noted, I will not touch anything during the tests.

Thanks a lot for your help

[Christian Cox]

I'm a bit stumped on this one, so I'm reaching out to my 2nd tier support team for assistance. I found that the problem seems to be directly related to these elements in the Divi Builder (see screenshot). If I delete all these items from the Divi Builder, the problem is resolved. So there's something going on there that is causing problems with the View's template during pagination updates. I will update you as soon as I have more information to share.

[ericW-5]

Ok Christian,
let me know

Thanks
Eric

[Christian Cox]

Okay I have some more information about this. Divi Builder adds iterative class names to content, like this:

.et_pb_section_0
  .et_pb_row_0
    .et_pb_text_0
.et_pb_section_1
  .et_pb_row_1
    .et_pb_text_1
.et_pb_section_2
  .et_pb_row_2
    .et_pb_text_2

When you rely on Divi Builder's row- and section- and module-based CSS styles for text, these classnames become problematic because Toolset Views has no way of maintaining these classnames during AJAX updates for a View (https://toolset.com/documentation/user-guides/front-page-filters/#2-1-custom-search-settings). We've analyzed this issue and determined that this is something we cannot fix effectively for all cases. Instead, we recommend you do not use Divi Builder's text styles, but instead use CSS to target individual text modules. For example, the text module that contains the text "La plateforme de mise en relations dédiée aux Employeurs et au Personnel de Maison" should be set to the default text styles in the Design tab, and a CSS classname should be applied to the text module in the Advanced tab. Then add custom CSS to change the text's font-size or line-height. Otherwise, AJAX updates cannot be used.

[ericW-5]

Ok, i will try this solution and let you know shortly

Regards
Eric

[Christian Cox]

Thanks, I will stand by for your update.

[ericW-5]

Hi Christian,

Appreciate your help. I set up various CSS classes for the text modules which are on the page.

It is far better as within the slider the titles are now displayed with the right size even with pagination updates. But I still have a remaining issue with all description texts (e.g. "super poste genial") as they are still bigger than a normal text... and I cant find how to change that... Can you help me on that ?

Thanks in advance
Eric

[Christian Cox]

Okay to get around this, I recommend wrapping the excerpt in a div with a CSS class or classes, and apply the font size to that custom class.

<div class="ts-override ts-override-excerpt-size">
{!{wpv-post-excerpt length="45"}!}
</div>

CSS:

.ts-override.ts-override-excerpt-size {
  font-size: 16px; 
}

For now, I have added this code in the View Jobs à la une 1. Check the View on the homepage to see if it's working more like you expect. If so, you can apply the same code in the other Views.

[ericW-5]

Hi Christian,

this seems to solve the issue, thanks alot for your great support.
i still have one question : where did you put the css classes .ts-override.ts-override-excerpt-size ? I could not find in the style.css file (divi child) nor in the divi theme options (hidden link).

Thanks and regards

[Christian Cox]

I added those CSS classes in the View editor for the View Jobs à la une 1. Just below the Loop editor panel there is a CSS panel. You can toggle that panel open to find the code.