Styles only applying when Microthemer is open

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 1 month, 2 weeks ago.

Author Posts

bluedognz

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

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

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

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

Thank you so much Sebastian.


Sebastian

You’re welcome!

You must login or register to reply to this topic.