Accordions & Alerts On Mobile?

Support
#1

Hey there,

I’ve been attempting to add an accordion and alert into my site. It does show when using the mobile preview as you can see here:

However, when visiting the site on a mobile device, or resizing my desktop browser to be the size of a mobile device, these elements disappear and will not show.

I’m pretty confused because not only do the accordions and alerts not show, those two, “Email Return” and “Email Conversion” headlines also do not show.

Checking on the display settings for the row and section these elements are contained in, from everything I can find they should show on mobile. I’m at a loss! Hoping you can see something I am missing.

Themeco has a login to my site from previous topics. If you need me to provide it again, please let me know.

Thanks,
Anthony

#2

Hi Anthony,

It is hidden on mobile/small screen. Check the section HIDE BASED ON SCREEN WIDTH option. See this: https://screencast-o-matic.com/watch/cbQjQxI6of

#3

Hey Lely,

On the page I have two sections containing the same content. One to show on desktop. One to show on mobile.

The one in your video is set properly, as that is the one to hide on mobile. However, the other which is my first screenshot is not set to hide on mobile. But, it is hidden.

You can see the difference in the two because of the format. The one in your video shows the content side by side which is for desktop.

The mobile version has the content placed vertically, on top and on bottom of each other.

Check out this .gif to see what I mean:

Hope that helps!

Thanks,
Anthony

#4

Hey Anthony,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks you in advance.

#5

Hey @RueNel, Lely has the correct URL in the video she made for me. It’s https://goestomarket.com/tools/email-service-provider/

#6

Hello There,

Thanks for providing the url. I have inspected the page and I could not find the other sections. Only section 7 and 8 which is hidden in mobile. I also noticed that you are using CloudFlare. Before we continue, I would recommend that you login to your CloudFlare account and purge everything. For best results, please follow the suggested CloudFlare settings from this article: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Please let us know how it goes.

#7

I purged the cache both on CloudFlare and my host, WPEngine. Still not showing this section on mobile :frowning:

I’ve enabled this section on desktop so you can see it and troubleshoot further. I’m really not sure how it could be hidden. The settings for row and section allow it to be shown on mobile but it is just disappearing.

:question:

Thanks!

#8

Hi there,

There is a broken element (malformed content) and that breaks the next section.

And if you’ll check it here https://validator.w3.org/nu/?doc=https%3A%2F%2Fgoestomarket.com%2Ftools%2Femail-service-provider%2F, there are too many unclosed element. And that’s what breaks it, and due to that, the section that is supposed to be displayed for mobile is now belongs to the structure to be displayed in desktop. Hence, the whole thing is hidden in mobile.

Please check your content if they are properly added, you may also try removing GF form for the meantime as for testing. And please provide your login credentials in a secure note. I can’t really pinpoint the exact cause of this issue so I need to check the content one by one.

Thanks!

#9

Hey @Rad I’m attaching a secure note so you can login. Let me know what you’re able to find!

By the way, the GravityForm has been there since before this section was made if that helps.

Thanks,
Anthony

#10

Hi there,

This content is the culprit.

<div align="center"><p style="font-size: 0.7em;">Source: <a href="https://www.helpscout.net/list-building/" target="_blank">HelpScout</a></p><div>

The last <div> is supposed to be </div>, I went ahead and fixed it.

Thanks!

#11

Hey Rad,

Awesome! Pretty rad you could find that. I feel kind of stupid it was my fault for not closing the <div> tag. Learning lesson here.

Thanks for finding this!

  • Anthony
#12

You’re welcome.