Edit css attributes

Hi there,

do you mean the scroll bar ?

If so you can make your CSS specific to just the scrolling element you want it applied to eg.

.carousel1::-webkit-scrollbar {
    height: 4px;
    background-color: #f5f5f5;
}

Oh perfect thank you! Do you know how could I adjust the margins of my paragraphs so that they are different on computer than mobile / tablet? Thank you.

We can see that on phone, the text "overflows on the side of the page", I would like to apply a margin so that the text is in full page on mobile and on computer.

Thanks

Are you referring to the paragraph created from GB's headline block?

If so you can set a different margin-bottom in the spacing setting with the Desktop/Tablet/Mobile toggle.

Hi Matthieu,

Try to modify flex-basis: 650px; to flex-basis: 100%; from this CSS:

.carousel1 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 650px;
    display: flex;
    overflow-x: scroll;
    margin-left: 0;
    margin-right: 1rem;
    padding-right: 0;
}

Let me know :)

I'm talking about the HTML block at the title "Testimonial Slider"

How could I assign margins on the whole slider so that the text does not spill over to the side of the page? And how to assign css on each <li>?

Thanks

Oh sorry I did not see your answer! That's perfect, thank you so much !

Do you know how could example assign a colored background on each paragraph? This means that you need different css attributes for each paragraph.

Thanks

In summary, attribute can be this:

.carousel1 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
	  display: flex;
    overflow-x: scroll;
	  margin-left: 0rem;
	  margin-right: 1rem;
}

for the whole carousel

And: background-color: #FFFFFF as well as internal margins for < li > < /li >

Thanks

Not exactly sure if I understand but if you are targetting an <li> element inside of the carousel, then this should be your selector:

.carousel1 li {
    CSS here
}

You can also try something like this to target them separately:

.carousel1 li:first-child {
    CSS here
}
.carousel1 li:nth-child(2) {
    CSS here
}

More info: https://www.w3schools.com/cssref/sel_nth-child.asp

You might need to check with the carousel's support team if you need further help with this.

It was indeed that. There is no support for the carousel, I tried to hand-coded in HTML and CSS.

On the other hand there is not much missing to get what I need!
But here I am blocking a bit ...

I wanted the scrolling to be done "<li> by <ly>" and not as currently in drag.

Also when I set a margin on the right for with a space between my <li> it shifts my slider on the phone ..

Unfortunately we are not able to help with custom solutions at this time.

Please refer this page for more info:
https://generatepress.com/what-support-includes/

You can try a forum like this:
https://wordpress.stackexchange.com/

Thanks for your understanding :)

It's a shame I was not far from the desired result 😅

I'm sure you will be able to figure out!

Another solution is to use a slider plugin - sometimes coding your own solution is more work than it needed to be.