Additional CSS works, but Page Builder CSS doesn't (or I don't know how to write it down correctly)

Dear support,

I just recently switched to Moesia, and wanted to add some CSS, so I did in the additional CSS section of the Customize function in Wordpress. However, I noticed that the changes weren’t visible on mobile. Therefore, I changed to the Attributes tab in Page Builder where there is space for CSS, but I couldn’t really get it to work. I entered the ID for the widget in the right field, and then copied the rest in the CSS field, but only the left margin with 10% worked. On the right it didn’t work and also the widget title didn’t get white. In additional CSS it all worked.

This is my code:
#pg-18-1 .widget-title {
display: none;
}
#pgc-18-3-0 {
margin: 0 10%;
}
#pgc-18-3-0 .widget-title{
color: #fff;
}

Thanks in advance!

Best,
Maarten

Hi,

You can put your code in above into additional CSS section but make sure the code call the correct element id.
Is the #pg-18-1 and #pgc-18-3-0 really exist in your page? Can you share your site URL here? Hope I can help you further.

Regards,
Awan

Its just a test site to learn how the theme works for my real site, but the page is:
http://maartentestsite.siterubix.com/5-2

Hope to hear from you soon.

I could get the margin to work when using id #pg-18-3, and filling in margin: 0 10%; in the CSS box. I can’t get the widget title to get white, though. I’m putting in this:

.widget-title {
color: #fff;
}

I don’t know how to let it know tha the color should be for the widget title. Normally I would do so as described above.

Hi,

I am trying to find the section ID which you mentioned in this CSS code but I didn’t get it, that’s why the code is not working.

But only this section ID pg-18-3 which exists on your site and the code to change the widget title to those section ID is working.

According to your site (your homepage), can you tell me what do you want to achieve?

Regards,
Awan

Hello,

Yes, those are the wrong ID’s. In the code below I have the right codes. When I put the code below into the additional CSS part of the Customize function of Wordpress, the code works and the margin of the about page becomes 10% and then the title of the widget, ‘about’, becomes white (on both desktop and mobile).

#pg-18-3 {
margin: 0 10%;
}
#pg-18-3 .widget-title {
color: #fff;
}
#pg-5-1 .widget-title {
display: none;
}

However, I want to use the Attributes function in the page builder editor for CSS, because there is a CSS box for desktop and for mobile separately. When I fill in page ID #pg-18-3, and ‘margin: 0 10%;’ in the CSS box, it works. However, I can’t seem to find the way to target the widget-title via this CSS box in the page builder editor. Or is this not possible?

It is not about the homepage, it is specifically about this page: http://maartentestsite.siterubix.com/5-2. I have deleted the Additional CSS from the Customize option, so you can see what has to be changed (the margin of the text in the about widget, and the color of the widget title ‘about’, using the CSS box in pagebuilder, not additional CSS under customize).

I hope it is clear like this.

Best,
Maarten

Hi,

The CSS box on the PageBuilder is used for the row/column itself. You cannot change the style of the children element on those row/column from that CSS box. So, you have to use the additional CSS box on the customizer to do that.

Regads,
Awan