Styles only applying when Microthemer is open

Author Posts

bluedognz March 29, 2022 at 11:41 pm

Hi there,

On this page: https://staging-sedberghschoolorg.kinsta.cloud/prep/academics

The hover cards have some CSS which makes the heading look like buttons, however it’s not displaying unless I have MT open.

This shows the background colour missing: https://share.getcloudapp.com/xQuqnwPx

This shows it working when MT is open: https://share.getcloudapp.com/d5u9wOBp

Any help would be much appreciated, thank you.

Sebastian April 5, 2022 at 8:39 am

Hey,

I’m so sorry for the slow reply on this, I missed the email notification somehow.

In answer to your question, you have set the background color of those buttons inside a media query:

@media (max-width: 1024px)

If you are using left panels in Microthemer, it may just be that the space available for the site preview in Microthemer is within 1024px, but you are viewing the site at full width outside of MT. Moving the code to the All Devices tab will make the color apply on all screen sizes. And remember to hit the “Publish” button / clear any site caching.

You can adjust Microthemer’s toolbar layout via Settings > View by the way.

I hope that helps. Please let me know if you need more assistance.

Cheers,
Sebastian

P.S. the troubleshooting video lists some other reasons why styles may only show inside MT. Not relevant to your case, but for other readers…

bluedognz April 6, 2022 at 11:29 pm

Hi Sebastian,

Thank you for the reply and no worries it was a little late.

I’m not seeing where the buttons background colour are set inside a media query.

This view shows me i’m looking at “All Devices”. I’m missing something basic sorry! https://share.getcloudapp.com/8LuDpW1p


Sebastian April 7, 2022 at 9:02 am

Hey,

On closer inspection of MT’s stylesheet, I think you have a typo in the Full code view (Settings > View > Full code view) where you haven’t closed a media query, so it wraps all of your other styles in max-width 1024px. Here is the code at the top of the file that needs an extra “}”.

/* mobile menu color hamburger */
@media (max-width: 1024px) { /* Makes these changes only when screen sizes is 767 px or less */
  
.fl-node-hsuzwxr182tl .menu > li > a, .fl-builder-content .fl-node-hsuzwxr182tl .menu > li > .fl-has-submenu-container > a, .fl-builder-content .fl-node-hsuzwxr182tl .sub-menu > li > a, .fl-builder-content .fl-node-hsuzwxr182tl .sub-menu > li > .fl-has-submenu-container > a {
    color: #8f7248;
}

Change it to this: 

/* mobile menu color hamburger */
@media (max-width: 1024px) { /* Makes these changes only when screen sizes is 767 px or less */
  
.fl-node-hsuzwxr182tl .menu > li > a, .fl-builder-content .fl-node-hsuzwxr182tl .menu > li > .fl-has-submenu-container > a, .fl-builder-content .fl-node-hsuzwxr182tl .sub-menu > li > a, .fl-builder-content .fl-node-hsuzwxr182tl .sub-menu > li > .fl-has-submenu-container > a {
    color: #8f7248;
}}

Unless you want it to wrap more of the subsequent selectors, in which case you would add the extra “}” a bit later.

Cheers,
Sebastian

bluedognz April 7, 2022 at 10:31 pm

Thank you so much Sebastian.

Sebastian April 8, 2022 at 8:34 am

You’re welcome!

You must login or register to reply to this topic.