Docs

[ldollard]

Two questions; how do i make….

.x-column.x-sm.vc.x-1-1

…apply to a specific content band only, like “content-band-4” for instance.

Secondly; i’m applying the same css to multiple content bands, how can i make this more compact. So instead of mutiples i just have something like:

.page-id-68 #x-content-band-4#x-content-band-5#x-content-band-6.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

This is the code as it appears on my page

/*resort_page_begin*/

.page-id-68 #x-content-band-4.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

.x-column.x-sm.vc.x-1-1{
padding-bottom:40px;
}

.page-id-68 #x-content-band-5.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

.page-id-68 #x-content-band-6.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

.page-id-68 #x-content-band-7.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

/*resort_page_end*/

Thanks so much URL in private message below.

[ldollard]

This reply has been marked as private.

[ldollard]

Also how do i remove the large amount of white space between the video and “Resort Amenities”.

I dont see any margin or padding there to reduce.

thanks

[John Ezra]

Hi there,

Thanks for writing in! Regarding your first post, please provide more infomation so we can understand you better. Regarding the spacing between video and “Resort Amenities”, you can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.page-id-68 div#x-content-band-2 .x-column.x-sm.vc.x-1-1 {
    padding: 0;
}

.page-id-68 div#x-content-band-3 h4 {
    margin-top: 20px;
}

Hope this helps – thanks!

[ldollard]

Let me try again.

I have this CSS

.page-id-68 #x-content-band-4.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

.x-column.x-sm.vc.x-1-1{
padding-bottom:40px;
}

.page-id-68 #x-content-band-5.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

.page-id-68 #x-content-band-6.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

.page-id-68 #x-content-band-7.x-content-band.vc{
border-bottom: solid #000000;
border-bottom-width: 1px;
}

“.x-column.x-sm.vc.x-1-1” is a section of the x-content-band, but as you can see its generically named, so any content band can have its name. How do i write the CSS so that it is a part of say “.page-id-68 #x-content-band-5.x-content-band.vc” only and does not affect say “.page-id-68 #x-content-band-6.x-content-band.vc”.

Secondly the white spacing answer worked perfectly, thanks.

[Nabeel A]

Hi again,

Thank you for the explanation. You can use this code for the specific x-column:

.page-id-68 #x-content-band-1 .x-column.x-sm.vc.x-1-1 {
    background: red;
}

Just change the #x-content-band IDs to apply on different content-bands. Hope this helps!

[ldollard]

Thanks so much, so i assume, if something is the child of a parent, i can use the child for specific CSS if i append it to the parent css but with a space between the two as you have shown.

Thing is i think i tried that but with no space, perhaps thats what cause the issue.

thanks again.

[Jade]

You’re most welcome.

[Author]

Posts