CSS on page-builder text element

Support
#1

I ask a lot of questions (sorry). I’m now building my 7th site using X-Pro and I am trying to become more efficient by using the power of X and coding less. However, there are certain things I just cannot seem to make work and I don’t find the answers in the forum, or in the documentation.

One example is headline and text elements in the page builder. If you view the attached image, you will see I have assigned a custom class to a headline element. In the page builder, I have set this headline to a font-size of 30px. Then, in Options/CSS I am targeting that element on devices that have a max width of 415px to reduce the font from 30px to 25px. No matter what I do, I am unable to get that CSS to take effect. It’s not just on this website, but I have never been able to get the custom classes to work on headline and/or text elements.

If I don’t use the custom class I assigned it, and just target the element with the X-assigned class, (In this example it’s .e6-8.x-text .x-text-content-text-primary) I can get it to react; but if I use my custom class nothing happens. I don’t want to have to target every headline on the site where I want to make this change, which is why I want to add the custom class. I just can’t get it to work.

Any thoughts?

Headlines-CSS
Headlines-CSS1601×1052 129 KB

#2

Hi @mcaravaglia,

Thanks for reaching out.

I replicate your concern and on my development website and you are just doing fine with your custom CSS. Just bear in mind that your CSS in the screenshot will only work 415px below width of the devices.

image
image1320×557 67 KB

Hope that helps.

Thank you.

#3

Marc,
Thank you for your reply, but I’m not sure you are understanding my concern. You have confirmed that what I am doing with the CSS is correct, so that is good; however, the CSS is not working on devices of below 415px.

Please read my original post thoroughly and see if there is something I can do to fix this issue.

#4

Hi @mcaravaglia,

I understand your concern, there could be a mismatch in your CSS code that’s the reason why it is not working on your end. I suggest that you will check your entire CSS here to check if there’s an error.

If it doesn’t help, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

secure-note
secure-note1040×250 15.3 KB

Thank you.

#5

Hey @mcaravaglia,

The access you provided isn’t Admin level so we can’t check the issue.

image

Also, if that is not the site we need to check, please give us the WordPress Login URL

Thanks.

#6

I apologize. I have set the level to admin. You are at the correct site…

Please Note The page “Test” has been renamed to “Home-2” and is now set as the default landing page.

#7

Hi @mcaravaglia,

It seems that the H1 tag default font size is overriding the custom CSS you have added to the Theme Options > CSS, to reset the font size of the heading you need to add the specific selector. Please find the sample code below.

/*For ThemeCo Support*/
@media screen and (max-width: 415px) 
{
    .section-head h1 
    {
        font-size: 5px !important;
    }
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

#8

Hmmm. Interesting. Thanks for this…

#9

You are most welcome, @mcaravaglia

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.