Please advise.

I have changed the CSS declaration to include the only screen in enfold-child/style.css.

I have disabled all file merging and compression, and checked Delete old CSS and JS files. I have also flushed the cache with wp-cli wp flush cache. I can confirm that the updatedstyle.css is being loaded by the browser (Chrome Version 96.0.4664.45 (Official Build) (32-bit)). I can see the updated style.css in Chrome’s Dev tools, and when I remove the media query, the map is successfully hidden.

However, as before, the map is not being hidden on screen sizes less than 768px with the media query including only keyword in enfold-child/style.css.

I’m not sure why you think including only screen instead of screen will make any difference. The function of the only keyword is to simply hide the CSS declaration from older browsers. See https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries. I am not using an older browser; and anyway, as stated above, the only difference between using only and not using only would be that the CSS declaration would not be applied on older browsers if using only keyword.

In summary, the CSS declaration including media query works in the Quick CSS field but not in enfold-child/style.css. The stylesheet is loaded but the rules are not being applied.

OK. So I copied the CSS from the Quick CSS field to \wp-content\themes\enfold-child\style.css, toggled Performance -> Compression, also Deleted old JS CSS files (under Performance) and flushed the cache from the command line with wp-cli wp cache flush.

I also loaded the site into an Incognito window and flushed the browser cache.

I did this several times and the CSS in child theme style.css failed to be applied when the browser screen is less than 768px.

I can confirm that the CSS rules from style.css (above) are being loaded. If I remove the media query from around the display:none !important declaration, the map is – as expected – not displayed.

We’re back at the beginning of this issue and discussion. Please help. I want to hide the map on narrow screens and want to put the CSS in the child theme’s style.css.

• This reply was modified 3 years, 5 months ago by forevershining.

Sorry about the login details. I’ve updated the password and checked that it’s good. See below.

Did you toggle or temporarily disable the Enfold > Performance > File Compression settings

As I said above, I followed your instructions. Also, as mentioned above, I can see that the CSS file with suggested declaration is requested and downloaded by browser correctly. However, the declaration is not being applied.

If I remove the media query the map is hidden as expected. If I nest the declaration in a media query, it is not applied when the media query requirements are met.

BTW, I want to share some screenshots with you. I uploaded to imgur.com but cannot make the images visible with tool img button. Please tell me how to share screenshots uploaded with imgur.

The imgur link is: https://imgur.com/a/nfA69Ax

• This reply was modified 3 years, 5 months ago by forevershining.

So I’ve tried copying leaflet.css to my child theme and setting the URL in Leaflet map settings, and in (Enfold) Theme Extensions and the copied CSS file is loaded and works (except that the map marker loads a ‘broken image’ icon).

I added the CSS declaration above (without media query) to this copied CSS file and it hides the map as expected.

However, as soon as I nest the CSS declaration in a media query, it doesn’t work.

I have tried your suggestion. Your selector is correct (as are the examples I gave in first post showing failed attempts). However, it still fails to hide the element on narrow screen widths.

@media screen and (max-width 768px) {
		#footer .widget .leaflet-map {
		display: none !important;
	}
}

I can confirm that the styles.css (and your suggested code) is loading correctly.

BTW: I attempted to add Leaflet element into page using Avia Layout Builder. The button for the Leaflet however is disabled – hovering over the button shows “This element has been disabled […] You can enable it in Enfold -> Theme Extensions -> Leaflet Maps.

Like the suggestions made in your earlier posts, this menu option does not exist. Am I using an out-of-date theme? Are the instructions out-of-date?

Thanks for trying to help.

I cannot find ‘Advanced > Responsive > Element Visibility‘. There is ‘Advance Styling‘ in Enfold options but there is no ‘Responsive > Element Visibility‘.nor can I find Leaflet element in drop-down list.

I followed the link you gave to “provide a unique class name or ID” (viz. https://kriesi.at/documentation/enfold/add-custom-css/). The page says to “go to Enfold options > Layout Builder and select “Show element options for developers“. However, there is no “Show element options for developers” under the latter Enfold options.

Both methods you suggest for hiding Leaflet maps in footer widget on smaller screens fail to work for me. Please help.