Layout not auto-responsive as expected

Support
#1

Hi X Team,

I’m having trouble with the layout of my row. I have set the layout for different devices and when I use your preview or scale my browser it looks fine with auto-responsive. But when I check my site on the different devices it doesn’t look the same.

Please advise

#2

Hi @smart_x,

Thank you for writing in, please check each of your Row’s layout


Please keep in mind that because of the left-panel of the Page Builder what you may be seeing on the preview is the Large Screen layout, while if you preview the page on the frontend, you’ll see the layout for Extra large screen.

If the issue persists, please provide the page URL where we can see the issue and provide us login credentials in a secure note so we can take a closer look.

Cheers!

#3

Hi X Team,

HAPPY NEW YEAR

I did check the Row’s layout. That’s why I don’t understand why it’s not as expected.

#4

Hey @smart_x,

Upon checking, your 3 column row is broken in the frontend while working in the builder. Such cases are usually caused by broken HTML. Upon checking your content and at first glance, I found that you have a broken HTML in the first column. Removing the broken HTML fixed the issue.

Please note that I didn’t fix the broken HTML as part of our theme support. It’s just that I saw it at first glance and I tested removing that. There are cases where there’s a lot of broken HTML in a page and it’s the site owner’s responsibility to remove them. Please be aware of this factor next time. You can paste your custom HTML in validation sites like https://htmlhint.com/ before inserting them to your page.

Hope that helps.

#5

Hi X Team,

Thank you for pointing this out. I didn’t see the broken HTML and also had no clue that a broken HTML can have this effect. Now that I fixed it the problem is solved.

Is it possible to change the behavior/design of the elements inside the columns depending on the screen size. For example a different font size for the header on a large screen then on a mobile phone, etc etc?
The Layout is auto-responsive now but the 3 columns look different on a mobile phone as on XS 480px & Smaller?? Text and buttons on a real mobile phone are overlapping, no space in between?

#6

Hi @smart_x,

Please navigate to Theme Options > Typography and configure the Root Font Size option.



More details about Root Font Size here.

Now on your text and headline elements use the rem unit for the font-size. This should make your text element responsive base on the Root Font Size.

CSS units for font-size: px | em | rem

Cheers!

#7

Hi X Team,

Thank you for your reply but I don’t understand exactly what to do.

Should I change the Font Size in: Theme Options > Typography > Root Font Size?
And what do you mean with:

“Now on your text and headline elements use the rem unit for the font-size. This should make your text element responsive base on the Root Font Size.”

I don’t understand why on the previews it looks different then on real devices.

#8

Hi @smart_x,

Sorry if I am not clear, my previous reply about Theme Options > Typography > Root Font Size is solely for the responsive Font Size, it has nothing to do with column layouts. If the Root Font Size option still confused you please read the details here (https://theme.co/changelog/#theme-x-5-1-0).

Basically, you see 5 (XS, SM, MD, LG, & XL) Font Size fields there, right? That represents screen size. So, whatever value you set there that will be your base font size on that certain screen width.



I did take a look on your page, and I don’t understand what is the difference that you’re referring to, please clarify, please provide us a couple of screenshots on it looks on your device and how it looks on your preview because on my end I don’t see any difference. Also, please clear your device browser’s cache, you might have a caching related issue.

Another thing, on the conjunction with Christian’s said above with the broken HTML markup. The URL field on the button should only contain the actual URL, not an entire anchor <a href> tag.

So if you want to link the button to Gogole page then just put the direct URL https://www.google.com.

This broken HTML markup even the tiniest bit can affect the layout of your page, please make sure to correct all of those errors, review each of your content. You can use this tool here for checking your HTML markup or better not to use HTML markup at all and style/format your content with the native options provided by the element.

Thanks,

#9

Hi X Team,

I changed the root font size for XS to 11. That’s why you don’t see a difference anymore. Before I changed the root font size for XS the preview looked fine but on a smartphone it didn’t.

Thank you for the HTML tip. I changed it.

And what about:

“Now on your text and headline elements use the rem unit for the font-size. This should make your text element responsive base on the Root Font Size.”

#10

Hey @smart_x,

Regarding this:

Friech was pointing to the following Text setting:

REM unit basically multiplies the Root Font Size so if you’ve set the XS Root Font Size to 10px and your Headline’s Font Size is 2 REM, it will display as 20px in XS view.

If you wish to learn more, please read the articles below.

Hope that helps.

#11

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