How to switch ROW and COLUMN of Headling elements

Support
#1

Hello,

I am wondering if there is CSS hook or tips to switch of Headlng element lay-outing.

My goal is for mobile (767) shows as column centering and for PC is of row for left align.

Heading contents has double text line(main and sub) and Icon for lay-outing and I wish if it can be switched especially for icon position.

Thanks.

#2

Hi There @jo3

Thanks for writing in! I have checked the site URL assigned to your license, but I could not access it (see secure note).

Basically you can set a media query to target your elements in different device widths and then you can add it into X -> Theme Options -> CSS area.

@media(max-width:768px) {
//Add your CSS rules here

}

If you have further questions, please provide us with the URL to your specific page along with screenshots, so that we can assist you accordingly.

Thanks!

#3

Thanks and I know what you advice me how to set is with @media.

My point is how to exactly write CSS in the { } .

#4

Hello, again,

Sorry about registered web access problem.

I have testing site that your support team access already many times.

Please refer secure notes if necessary.

#5

Hey @jo3,

Regretfully, I’m not sure what is it you’d like to do. Would you mind providing screenshots of the elements you’re referring to so we could help you find the theme selectors you need.

We have a CSS Class List but it is limited. To override other areas it is expected that you need developer knowledge. You can start learning how to target elements by learning how to use developer tools. Here’s a guide. Then to actually modify an element, you need to learn CSS. Here’s a resource.

Just note that we could not help with the actual customization as that is outside the scope of our support.

Thanks.

#6

Thanks.

My wish is the same as the following.

But I can not figure out yet for PRO.

What is the Containers Flex Layout ?

I just want to centering the headling element with icon in row.

#7

Hello There,

Are you using the custom header builder or the Pro Editor? With Pro editor, you can simply center align the column and you are all set. Here is an example using only a text element and the column is align centered. I have entered this in the text element:

<p><strong>Long Beach Home Loan Corp<br />
</strong>5150 E Pacific Coast Highway<br />
Suite 20<br />
Long Beach, CA 90804<br />
[x_icon type="phone"] (562)346-3232</p>


I did not use any custom css in this one. I just utilize the settings of the columns and the text element.

Hope this helps.

#8

This is not the same story for my case.

I can do with classic custom header icon for centering with header text from the property panel only.

I will upload the image later.

Thanks

#9

Hello There,

Please update the given credentials in your previous thread because it no longer work for us. We need to login and check your site and investigate your issue further.

Thank you in advance.

#10

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