Certain Elements became not-responsive

Hey there,

I’m looking at my site on mobile devices and, unfortunately, the mobile responsiveness has somehow broken. I can confirm this previously worked.

For example, the main page: https://goestomarket.com/ if visited from a mobile device the top yellow section isn’t responsive.

But, the blue section below it is. Oddly, the blue section is a duplicated section of the yellow one above it that I added the other day.

The menu I created also does not work responsively.

Not sure what happened to cause this. Any info you have would be helpful!

Thanks

edit: Wanted to add the footer menu is also not responsive. Hope that assists!

Hi there,

I actually see that the page you gave the link is pretty solid and have the responsive view. As you use Pro I am sure you are aware that you will need to hide some elements that are not suitable for mobile and show other mobile-friendly using the Hide During VBreackpoint feature:

For the Yellow and Blue sections I suggest that you use Responsive Text:

The article above is the shortcode but the same thing is available in the Pro Editor by clicking the Settings icon:

And here is a link fo further reading:

Thank you.

Hey Christopher,

I appreciate the detail in your reply.

My concern is these elements, the yellow section and the menu used to work fine on mobile. Now they don’t. How can I be confident using X for my site and other sites when there isn’t consistent behavior?

I’ve changed nothing in my header for many months. All the sudden it doesn’t work. The only thing I can think of that would cause this is the theme.

The preview in X for device size shows the text and menu correctly adjusting. But, visiting the site from a real mobile device has a different experience.

Here’s the preview in X:

Here’s how it really looks on mobile:

I’m a fairly casual user of the theme but this is not acceptable. Using responsive text for every text element is not a solution. That’s going to bog-down the loading time of my site and slow it’s performance.

Again, this previously worked without any problem so it’s definitely something within the theme causing it as far as I can tell.

edit: I fixed it. The problem was due to margins and padding.

Hi there,

The difference that I can see from your screenshots is the device width. As you can see, the menu doesn’t change at all, but the width of the screen where it’s being viewed.

Plus, the text in the yellow background is standard <h1> element which has no responsive text attached to it.

My question is, how did it work before when the text is just plain <h1> and the menu remain the same. Are you able to provide some screenshots of how it’s before?

Thanks!

Hey Rad,

The difference that I can see from your screenshots is the device width. As you can see, the menu doesn’t change at all, but the width of the screen where it’s being viewed.

That’s how responsive sites are supposed to work in principle, right? They adjust to the size of the screen they’re displayed on.

I fixed the menu by adjusting Dropdown > Setup to be rem instead of em. That allows the menu to now properly display.

Plus, the text in the yellow background is standard <h1> element which has no responsive text attached to it.

The theme is responsive in itself, yes? That alone would let my plain <h1> tag adjust on a per-device basis. You can see it’s working now and they are still regular <h1> elements, not Responsive Text.

You’re a smart guy and I’ve worked with you in the past. Are you telling me that you really believe a regular <h1> element on the page won’t be responsive in X/Pro Theme unless I use Responsive Text?

Check the site now from your phone or inspect on Chrome using the different device options. It’s working since I removed the padding and/or margins.

My question is, how did it work before when the text is just plain <h1> and the menu remain the same. Are you able to provide some screenshots of how it’s before?

The only difference was padding and margin had been applied previously. It displayed very similarly to how you see it now.

There must have been some update to X/Pro that broke how it displayed. Removing the padding and/or margins for elements fixed it.

I don’t have any photos or examples, unfortunately. You’ll have to take my word that it worked.

Glad that it is now fixed.

Hi there,

Yes, that should how the responsive works, but your title isn’t responsive since it’s standard <h1> without class or responsive text, nor font styling from Typography setting. So I was wondering how it was working without them. The drop-down dimension depends on the size of its menu items and not on device width (yes, it’s not responsive), and it’s been like that since its release, so I’m wondering how it was working before. What I’m trying to get and understand is how you made it before so we could find what’s changed.

In this scenario and case, the best mobile menu is Navigation Collapsed since it’s layout is vertical (STACKED for mobile), it’s good for mobiles. While the Navigation Dropdown (your current menu) is similar to desktop menu’s drop-down, the only difference is it uses an icon as a trigger instead of an inline menu. The layout is both the same, the items display horizontally (INLINE for desktop).

Hence again, my question is, how did you manage to make the Navigation Dropdown respond? Maybe we can start from there and find the differences.

The rem and em has the base font, it responds to its base or parent font and not on screen size. If its unit is vh, vw, then it should respond to screen size. Please check the explanation here https://stackoverflow.com/questions/15649244/responsive-font-size. He uses @media query to assign different EM value since EM doesn’t respond to screen size, but to the parent or initial font size. The same goes with REM.

I’m not trying to end or dodge this issue, I’m just trying to understand what was your setup and compare it to what I understand since I’ve been using X/Pro and a bit familiar with the setting.

About the <h1>, it’s not going to be responsive if you’re not going to make it responsive, plus it’s a plain HTML element. You should check Pro > Options > Typography > ROOT FONT SIZE and apply different ROOT font size for each device to make it responsive. Then each em and rem should respond to it, and it’s something I can’t find on your site. It still uses the size declared in CSS file instead of from the settings.

And again, even if you changed the REM and EM values but the ROOT font size are all the same regardless of device, then it’s not going to respond. And now that I starting to understand what’s changed, I think the problem is your Typography settings. Please provide your login credentials so I can verify it.

Thanks!

Hey Rad,

I’m not trying to end or dodge this issue, I’m just trying to understand what was your setup and compare it to what I understand since I’ve been using X/Pro and a bit familiar with the setting.

My apologies if I seem combative. Not what I am trying to communicate. I know you’re here to help and have done so in the past with questions I’ve had.

Let’s see how I can explain to help you understand a little more.

how did you manage to make the Navigation Dropdown respond? Maybe we can start from there and find the differences.

I got lucky, I think? I used the header builder right after it was released and made my header. You can login to my site and look at the settings. These login details should still work: https://theme.co/apex/forum/t/accordions-alerts-on-mobile/8090/9?u=ampukal

The only thing I have changed since originally building it was switching em to rem yesterday. Otherwise, everything is exactly the same as when I created it.

About the <h1>, it’s not going to be responsive if you’re not going to make it responsive, plus it’s a plain HTML element. You should check Pro > Options > Typography > ROOT FONT SIZE and apply different ROOT font size for each device to make it responsive. Then each em and rem should respond to it, and it’s something I can’t find on your site. It still uses the size declared in CSS file instead of from the settings.

I appreciate this direction. I’ve made the change in my theme.

I’m happy it’s now working and displaying correctly. If you have other suggestions, I’m very opened. I don’t work in HTML/CSS or web design daily, you’re definitely the expert so any ideas are welcome!

Thanks,
Anthony

Hi there,

Ah, glad its work now. That’s what I noticed when I checked, the CSS that is being applied is from CSS files which are the default. Maybe the update resets your settings.

I checked and now the menu became too narrow, how about setting its width to 15rem?

Thanks!

I’ve taken your recommendation and switched to Navigation Collapsed. It’s a better overall solution. Appreciate the nudge to move towards that.

Thanks!

1 Like

If you need anything else please let us know.

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