[Vadi4ek SParticipant]

Hi, I need to find a way to disable @media css rules on some pages.
I made a custom landing page, from a BLANK page, and another version for mobile devices.
The first LP doesn’t look good when columns are in one grid.
Is it doable from the page custom css field? and how?

Cheers

[SupportMember]

Hi there!

Thank you for using the theme!

It is possible but we’ll need to inspect the actual website in order to help you with it. Can you please provide the website url and the screenshot of how you want the columns to look like on smaller screens? We’ll be happy to assist you further with this.

Cheers!

[Vadi4ek SParticipant]

This reply has been marked as private.

[AlexanderKeymaster]

Hi Vadi4ek S,

We can help with small CSS tweaks, such as a page needing to display slightly differently.

However, X is built from the ground up to be responsive. There’s a whole lot more than media queries in play. Much of the responsive design can be done without media queries by using a combination of min-width / max-width properties and percentage based dimensions.

I’m afraid there isn’t a way to make X non-responsive unless you rewrite a good deal of CSS.

This isn’t something within the scope of support, but I can give a bit of advice. You could modify the SCSS files included with the theme, then compile them into a new CSS file. Then there are ways to load an alternate stylesheet depending on the page. If you’re ok with rewriting the CSS, we could help you with loading an alternate stylesheet per page. It’s quite an undertaking though, and I wouldn’t recommend it because of how X will continue to grow and change from one version to the next.

[Vadi4ek SParticipant]

First of all, You right, I don’t wont to customize core files.

I am ok with the fluid %% css.

I just need the “alignment” attributes not to change to “none” etc when the screen is smaller.

Are you %100 sure it’s not possible throw the page custom CSS field?

Cheers

[SupportMember]

Hi!

Thank you for the info.

Can you please provide a screenshot of the elements that you want to change or prevent from changing from media queries? We visited the website but we’re not so sure where to start.

Cheers!

[Vadi4ek SParticipant]

Thank you guys,
I am talking about any columns element like 1/2 + 1/2 etc. Not to jump one under another, but always stay in raw.

[ChristianModerator]

Hey there,

In the Customizer > Custom > CSS, please add the code below.

@media (max-width: 767px) {
	.x-column.one-half, .x-column.one-third, .x-column.two-thirds, .x-column.one-fourth, .x-column.three-fourths, .x-column.one-fifth, .x-column.two-fifths, .x-column.three-fifths, .x-column.four-fifths, .x-column.one-sixth, .x-column.five-sixths {
	float: right;
	}
}

Then, manually set the width of your column like what you did here.

Hope that helps. 🙂

[Vadi4ek SParticipant]

Excellent!
Thank you guys!

[SupportMember]

Glad we could help. If you have any questions, let us know.

[Author]

Posts