Elements disappear when screen is resized to 480px (eg. on mobile)

Hey,

You have some CSS that hides that section on mobile – see the video here: http://somup.com/crXvIY0tPJ

I hope that helps!

Cheers,
Sebastian

P.S. remember to clear your cache after making changes with MT

P.S. the video will take a minute to upload

Hey Anders,

The docs have been fully updated for version 7, and there is a video that explains the main changes for upgrading from version 6: https://themeover.com/v6-to-v7-3-main-changes/

Some things I forgot to mention in the video:

– You need to use the Publish button, changes are saved as a draft by default (instead of having a draft mode)
– The default responsive tabs are a bit different (on new installs). They are all max-width rather than a mix. You can still load the legacy media query set via the Edit media queries option, if you prefer. But this is just for new installs of MT.

I’m not quite sure what you’re trying to do with those other sections. But if things aren’t working (like .buy) could it be that you need to increase the CSS specify of your selector? So instead of

.buy

You would have

#page .buy

Also, what about making the top bit in you first video show using:

#page #whatWeDoSection {
   display: block !important;
}

Or if you having !important set globally:

#page #whatWeDoSection {
   display: block;
}

I take it you could not find the selector that sets display:none in MT, so it’s not one of yours?

Cheers,
Sebastian

OK, I understand now. Sorry it was tricky to work out what was disappearing.

You need to target your display: block on the inner element e.g.

#page #featuresSection .space-2

But maybe you can solve all of the issues with one selector (no commas):

div#page .space-2 {
   display:block !important;
}

That just uses the rule in the theme but with the div tag referenced to make it higher specificity. Of course, that rule may be too general. Perhaps it would show content elsewhere on the site you really do want hidden on mobile…

Cheers,
Sebastian