Space Beetwen css for information box carousel

Hi guys, I have an information box carousel in my homepage like this https://gyazo.com/3d5c1c975d01793fe436c53d83671391

My question is: How can I change the space between elements with a maximum of 30px to 50px? I tried the following CSS:

[class*=”wd-grid”] {
–wd-gap: 50px;
}

However, it doesn’t work on the live site, although it changes correctly in the editor.

If you have the answer, could you please provide the CSS? Thank you.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.info-box-carousel.wd-grid {
	--wd-gap-lg: 50px !important;
}

Kind Regards

Hi, thank you for your response, the code works perfectly, I really appreciate it.

I have one more question: is there a way in CSS to change the color and add an outline to the Google social login button?

Please provide us with an example of how you want this button to look. If it’s possible to achieve using custom CSS, we’ll do our best to assist you.

Kind Regards

Hello, I want to create something like this. Is there a way to do it?

https://gyazo.com/514c7660efc3a51fd8b019c06451c960

Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .btn.login-goo-link {
    background: transparent;
    border: 1px solid #8E8E8E;
    color: #8E8E8E;
    --btn-box-shadow-hover: none;
}

body .btn.login-goo-link:hover {
    border-color: #000; 
}

Kind Regards

[Author]

Posts