Slider customization: add buttons all txt display on all resolutions

Hi there,

1/ Text contents for each slide: I would like to display 1 line or 2 with the formatting I like and above all, show some buttons linked to internal pages. I created some very simple posts with the information I want to display in the slider but currently, just a post excerpt is shown as a text (<p>), so I loose all the text formatting (links, buttons etc.).

The most straightforward way for you to retain the formatting of the post’s excerpt in the slider is to create a custom excerpt.

To create a custom excerpt: Navigate to the editor for any given featured post. Select the Screen Options tab in the upper right and ensure the option next to Excerpts is checked.

Next, scroll down to the bottom of the page to find the Excerpts module.

Copy/paste the excerpt you wish to use for your post, including all of the HTML/formatting, into this module’s field.

Save your changes and the custom excerpt will then be displayed alongside the post in the slider, formatting and all. ??

2/ About this slider again, i noticed that only post title displays when we switch on smaller resolution. Is it possible to make all the content of the post visible on all resolutions?

You could force the excerpt to display on smaller devices with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

@media only screen and (max-width: 1200px) {
    .site-banner p {
        display: block;
    }
}

Let me know how you get on with that! I’ll be happy to help if any extra questions come.

Hello!

1/ it works like a charm, thanks!
2/ i entered the snippet in the Jetpack’s CSS Stylesheet Editor but just a ‘piece’ of the slider appears on the mobile version. Ideally i would like the slider to be big enough to display the post excerpt. The website is still in local but you can see a screenshot here: https://www.bordeaux.jp/bwc/test/slider_mobile.png
Any idea?
Thanks in advance!

You could make the slider larger (and therefore push all of the content into view) by adding the following to your custom CSS and increasing the value of padding-bottom:

@media only screen and (max-width: 400px) {
    .site-banner-media, .site-banner .site-banner-thumbnail {
        padding-bottom: 50%;
    }
}

It’s hard to know what specific value padding-bottom should be without access to your site but have an experiment and let us know how you get on. ??