2 Identical introductions, 2 different results

SO i have 1 page on my site which looks like it has a different intro than the others, see attached screenshots. images here: https://imgur.com/a/HeCV7
All settings are the same, maybe its something to do with ‘column 1/1’ and ‘column’

Site here: http://34.248.13.193/

Hey JDorrian,

You’re using custom HTML inside the Classic Custom Headline element. That is not correct. The only HTML elements that should be placed inside that element is <span> and <a> elements.

You have this and additionally, there’s inline CSS in your custom HTML.

Please put your code in the Raw Content Element. The cause of the issue is your use of custom elements and CSS. To fix that, you need to understand each CSS property you’re using. I suggest you learn from https://www.w3schools.com/. If you have a tight deadline, I recommend you hire a third party developer to fix the issue for you.

Thanks.

But why would 2 identical sections, rows, columns and content have 2 different results?

Is it something to do with the fact that one is a “column1” and the other is “column1 - 1/1” ?

Here’s the issue explained more indepthly using new images. It has nothing do do with the inner HTML/CSS it appears to be a theme related difference but I don’t know where the difference is

Please give us WP Admin access in a Secure Note so we could look closely.

Thanks.

@christian_y Added a secure note to my last reply

The issue is because the <br> tag in your code is converted to <p> tag by the WordPress autop function. The paragraph tag in X has a base margin of 0 0 1.5em. It uses em which is a scalable unit. Its size is based on the h2’s font-size of 54px which is added dynamically. Most probably you’re using the Responsive Text feature to manipulate the font-size based on screensize.

As previously said, this is because of the custom HTML and CSS you inserted in the Classic Headline Element. This is not a bug in X. Further explanation regarding why this does not work would be getting into custom development which is outside the scope of our support.

Please use the Raw Content element instead. I tested it and your code works consistently.

Thank you for understanding.

If i replace both the custom headlines with ‘hello’ then they are both still not in the same position, so i’m not convinced this is the problem

I will make the conversion to raw content to see if it fixes my problem. Inside the raw content fields i cannot apply :hover css from the global css file, is there a solution to this?

I’ve added a custom headline to both your Services and Contact page and they align perfectly the same. Please look at this screenshot closely for proof.

Since you’re using custom HTML here, you need to add a class to your element that you want to apply the hover then add it to your Content CSS or Global CSS.

<div class="my-class">Text</div>

.my-class:hover {
color:red;
}

You can learn HTML and CSS basics in https://www.w3schools.com/

Thanks.

Which pages are they in the screenshot? As you know only 1 page didn’t line up and the other 4 did. ALso, it seems that classes added to elements in the raw content aren’t taking effect

I previously said a dynamic font-size of 54px is being added to your headline.

You might have a syntax error in your CSS. I added a class of red in your custom HTML and added CSS in the Content CSS and it works.

@christian_y Thanks that cleared everything up, I didn’t realise you meant element specific css code, thanks very much i actually didnt know there was a cornerstone element for that!

You’re welcome, @JDorrian. I see you’re just creating a button. You might want to try the Button element which has some styling options built-in. Visit our Knowledge Base for the usage instruction.

Thanks.

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