Docs

[goodimp]

I’m trying to style an accordion but none of the CSS I add is having any effect.

I added and adjusted the default settings in the customiser (see below) and should see big borders. It works if I change the style through the inspect on Chrome. Any thoughts?

.x-accordion-group {
margin: 8px 0;
border: 6px solid #dddddd;
border: 6px solid rgba(0, 0, 0, 1);
border-radius: 3px;
-webkit-box-shadow: 0 0.125em 0.275em 0 rgba(0, 0, 0, 0.125);
box-shadow: 0 0.125em 0.275em 0 rgba(0, 0, 0, 0.125);
}

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[goodimp]

This reply has been marked as private.

[goodimp]

This reply has been marked as private.

[Thai]

Hi There,

You forgot to close the curly bracket(}) in your custom CSS.

Please find this CSS:

@media (max-width: 650px) {
  a.x-brand.img { 
     max-width: 200px;
     margin-top: 25px; 
  }

@media (max-width: 979px) {
    .x-navbar-fixed-top {
         position: fixed;
         height: auto;
         padding-bottom: 0px;
}
  }
  
.x-accordion-group {
margin: 8px 0;
border: 6px solid #dddddd;
border: 6px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
-webkit-box-shadow: 0 0.125em 0.275em 0 rgba(0, 0, 0, 0.125);
box-shadow: 0 0.125em 0.275em 0 rgba(0, 0, 0, 0.125);
}

And replace to this:

@media (max-width: 650px) {
	a.x-brand.img { 
		max-width: 200px;
		margin-top: 25px; 
	}
}

@media (max-width: 979px) {
	.x-navbar-fixed-top {
		position: fixed;
		height: auto;
		padding-bottom: 0px;
	}
}

.x-accordion-group {
	margin: 8px 0;
	border: 6px solid #dddddd;
	border: 6px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	-webkit-box-shadow: 0 0.125em 0.275em 0 rgba(0, 0, 0, 0.125);
	box-shadow: 0 0.125em 0.275em 0 rgba(0, 0, 0, 0.125);
}

Hope it helps 🙂

[goodimp]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! I have checked your css and you have almost got the font changes. You have added this:

#discover-accordion .x-accordion-heading a {
  font-family: 'Khand', sans-serif;
  color:rgb(47, 37, 60);
  font-size:70px;
}

#discover-accordion .x-accordion-heading a:hover {
  font-family: 'Khand', sans-serif;
  color:white;
  background-color:magenta;
}

This code will only change the accordion element with the ID, discover-accordion. Still you haven’t imported the Kand Google Font. You should add this first at the very beginning of your custom css

@import url('https://fonts.googleapis.com/css?family=Khand');

And then if you want to apply the font family to all accordion elements, you should be using this:

.x-accordion .x-accordion-heading a {
  font-family: 'Khand', sans-serif;
  color:rgb(47, 37, 60);
  font-size:70px;
}

.x-accordion .x-accordion-heading a:hover {
  color:white;
  background-color:magenta;
}

We would loved to know if this has work for you. Thank you.

[goodimp]

This reply has been marked as private.

[Rupok]

Hi there,

I have checked and I can see font-weight 300 is working fine. It’s not bold as bold is much bolder if you see my screencast – http://recordit.co/nFt6wMJ85y

Cheers!

[goodimp]

This reply has been marked as private.

[Christopher]

Hi there,

I don’t have privilege to access customizer. Please update your @import block code to :

@import url('https://fonts.googleapis.com/css?family=Khand:300,400,500,600,700');

And add it in child theme’s style.css file, please see the result on attached screen shot.

Hope it helps.

[goodimp]

This reply has been marked as private.

[goodimp]

This reply has been marked as private.

[Jade]

Glad to hear it’s sorted now.

Cheers!

[Author]

Posts