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

Author Posts

appscaptain November 30, 2021 at 1:08 pm

Hi,

Please see this:
https://share.getcloudapp.com/L1uelZvG

The page is at dincoronatest.dk, and major sections just disappear (including the buy section) which they should not).

Any ideas on how to make all of these show on mobile at 480px?

Sebastian November 30, 2021 at 1:20 pm

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

appscaptain November 30, 2021 at 1:46 pm

Thanks so much Sebastian!

I tried to apply the tweaks, however I can’t seem to make them apply to some sections (id #featuresSection and the .buy section) – see this:
https://share.getcloudapp.com/6quvplEl

P.S. I updated to Microthemer 7. A bit unsure how how to create new tags in this version. I only see how to edit existing ones. Do you have a Microthemer 6 > 7 intro video that shows how things changed in this new version, an article or something?

All the best

Anders

Sebastian November 30, 2021 at 4:47 pm

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

appscaptain November 30, 2021 at 5:02 pm

Hi Sebastian,

The display:none; selector is not mine. This is how I have added the .buy class to the Gutenburg block:
https://share.getcloudapp.com/yAu0q758

Check out this video for a clarification:
https://share.getcloudapp.com/OAuGy9lz

Any ideas?

P.S. Don’t quite understand your max-width – but I guess it doesn’t apply to me since I updated Microthemer from 6 > 7.

Sebastian December 1, 2021 at 11:35 am

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

You must login or register to reply to this topic.