X-column not responsive anymore

[aiad_development]

Hi there,

I have noticed that recent updates to X Theme have changed the way in which columns are displayed and their responsiveness. I use variations of class=“x-column” and it’s different column divisions eg “1-1-2” “1-1-3” etc for contact form fields and other custom layouts.

I am doing responsive tests on a website that uses those classes and have noticed that the once responsive columns now do not automatically update when the screen changes size.

Has the new X Theme removed the old styles?

An example of these columns is on the contact form and subscribe to newsletter on this page:

Seminars - McQiu Lawyers

Thank you

[ruenel]

Hello @aiad_development,

Thanks for the very detailed post information. The column styling did not changed and will not ever change. Just make sure that you have properly use the correct column structure. Make sure that you have the row wrapper as well like this one:

No Row wrapper and adding last class in the last column:

<div class="x-column x-sm x-1-2">
  // your content here
</div>
<div class="x-column x-sm x-1-2 last">
  // your content here  
</div>

Or the correct way by using a row wrapper container:

<div class="x-container max width">
  <div class="x-column x-sm x-1-2">
    // your content here
  </div>
  <div class="x-column x-sm x-1-2">
    // your content here  
  </div>
</div>

We would love to know if this has worked for you. Thank you.

[aiad_development]

Hi there,

That doesn’t make it responsive. I have updated as per your instruction:

<div class="x-column x-2-3">[email* your-email placeholder "Your Email Address"] </div>
<div class="x-column x-1-3 last">[submit "SUBSCRIBE TO NEWSLETTER"]</div>

On an iPhone screen size it does not automatically turn into a single column, which is what it did before. It’s as if the media queries for x-column are gone.

Thank you

[christian]

Hey @aiad_development,

Please look closely at the code shown by Ruenel. You’re missing the x-sm class. Adding that to the x-column div would make the columns stack on mobile.

I’m not sure why it worked for you before when that class has been present for a long time. You might have other custom codes that made it work previously but now it’s not applicable anymore.

I’d recommend that you build a test page in your site using the Classic Section, Classic Row, and Classic Columns then inspect the HTML structure in the frontend along with their CSS. You’ll know if there’s a bug with our theme if the structure breaks when using the parent theme.

Hope that helps.

[aiad_development]

Sorry I didn’t read the code sent properly.

It worked by adding the “x-sm”

THANK YOU!!!

[nabeel]

Glad we could help.

Cheers!