Mobile Scroll with tabs

Hi there

How to remove this scroll of the tabs from the mobile? I want to break down the 2nd tab text into 2nd line and remove the scroll.

Also, when submitting the form why the tab gets green? That looks weird, it’s getting the success color of Contact Form 7, see below:

How to avoid this happening? See URL in notes.

Also, when editing in the corner stone, there’s an icon but on Front end it doesn’t show up.

Thanks

Hi Abd Ur Rehman,

Thank you for writing in, to stack the tabs in mobile, please add this to Page CSS

@media (max-width: 767px) {
	.x-tabs-list {
		flex-wrap: wrap;
	}
}

The second the third issue probably related, please check all the HTML content of that page, including the content of that form, and make sure there is no invalid HTML mark up and all tags are close.

Hope it helps,
Cheers!

Sorry, could you point out how the HTML is invalid? Where’s the error?

Here you have the https://gist.github.com/Abd-Ur-Rehman/27ca4fbcaa24f1646ce3941e934037f9 Contact Form 7 that I added with x cols.

Furthermore, I have added that code in my child theme but it doesn’t work. How can I make it work with the child theme that I’ve created following this. https://codex.wordpress.org/Child_Themes

About the tab each one shows in one col but I’m trying to make it as in the site in notes.

Thoughts?

Thanks

Hi Abd,

It’s due to columns, columns should be group by row. But try adding this to the end of your HTML form,

<div style="height:1px; clear: both"></div>

Hope this helps.

Where? Can you edit the code? I’ve provided that above?

What about the child theme query?

Hi Abd,

Yes, add it to the end of HTML form code that you have provided. And the CSS provided by Friech should be added to Theme Option’s CS or Page’s custom CSS. Please click here Page CSS as reference, it was provided by Friech.

Don’t add anything to you child theme unless recommended.

Thanks!

I know that about CSS but I would like to have all Custom CSS in child theme rather than theme options because it’s easy to change or update that frm the child theme.

I am aware of that the global CSS is loaded at the end in X but how can I load it from child theme?

Did you check the site from above notes? I’m trying to replicate?

Hi Abd,

I see, in that case, please add it on your child theme’s style.css and please follow this for proper child theme installation.

Please implement the CSS first and we’ll check about the tabs and your child theme setup.

Thanks!

I’m reposting that site that I’d referenced above, would you mind taking a look at that? See notes.

I’m trying to make the tab text link this. :point_down:

I want to have them in 2 cols as above screenshot. I have added the above CSS in child theme’s style.css Can you take a look?

Thanks

Hi There,

I could see that they’re in 2 columns right now:

Did you sort it out?

Thanks.

Please revmove the image from the post:

That’s the URL I’m copying I’m trying here, see the URL in notes.

Hello @abdurrehman,

I have made the thread unlisted so that only you and our staff can see the screenshot.

Sorry if it took longer to have a resolution to your issue. To resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-tabs-list a, .x-tabs-list button {
    white-space: normal;
}

We would loved to know if this has work for you. Thank you.

This worked, could you tell me what I’d asked about child theme?

This

@friech now the HTML is fine still that’s not showing up. Thoughts?

Hi There,

Please remove this inline CSS from your icon:

background-color: hsl(45, 100%, 60%)!important;

It make the background color of icon same as the background color of section.

Did you mean this code: https://gist.github.com/Abd-Ur-Rehman/22e9b828e6cd3d9137339e0b6a80ed5b?

That would require the custom development which is outside the scope of our support. You need to contact to a 3rd party developer to help you with this.

Thanks for understanding!

Thank for this, didn’t get notice of that.

About this:

It’s not what I’m referring, that’s not the code of the X theme. I’m referring to this.

My CSS added in the child theme doesn’t work and I don’t want to use in the Global CSS theme options. How can I make it work with the child theme?

Hi There,

Where did you download the X child theme? I couldn’t find the style.css file from the child theme loaded in your website.

You should download and install the child theme under your dashboard page:

https://theme.co/apex/child-themes

If it still doesn’t work, please provide us with your admin account so we can take a closer look.

Let us know how it goes!

You’re asking the info that I had already provided one day ago. :point_down:

The child theme that you have for X here only contain this filter.

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

With this also my child theme CSS doesn’t work. AFAIK, that the X is loading the child theme stylesheet before loading the global CSS, that’s why it doesn’t work.

My child theme is loading the CSS mentioned in above post.

How to make it work?

Thanks

Hi Abd,

We understand that, but we still recommend checking this in case the other one has incomplete files.

The child themes are ready for download and should be installable.

And I myself is unable to find the child theme’s style.css from your site, we can check it through browser’s inspector. Or probably it’s hidden as I noticed the paths are different. Perhaps you can provide the login credentials in the secure note as well?

And global CSS is placed there for some reason and it’s implemented that way. If you’ll have to apply CSS through child theme’s style.css then you’ll have to use !important (eg. color: #000 !important; ).

Thanks!