Leaflet map CSS styling

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.

Thanks for the help. The URL is in the Private Content below. The Leaflet map is in the second column of the footer.

I want to hide the map on smaller screens (display:none).

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?

As mentioned in previous post I can confirm that the CSS declaration (above) is loaded into browser correctly. I am also loading the site in an incognito window.

Nonetheless, I followed your instructions. The leaflet map is still not being hidden as per CSS declaration above.

I can enter the CSS declaration directly into Chrome DevTools’ inspector-stylesheet – and the map is hidden. However, something is preventing the CSS declaration in child theme’s style.css from being applied.

I suspect the javascript that creates the map element is also modifying the style attributes after my CSS file is being applied.

Also, could you please confirm that the instructions I’m being given are either a) out-of-date, or b) I’m running an old version of Enfold ? (See #1328171 & #1327722).

Current Parent Theme (Enfold) Version Number is 4.8.6.5

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.

/*
 Theme Name:   Enfold child
 Description:  Enfold child theme
 Author:       My Name
 Template:     enfold
 Version:      0.1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

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

This is the content of enfold-child/style.css. The CSS declaration successfully hides the map.
However, if I uncomment the media query, the map is not hidden on screens less than 768px (or any other size).

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

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.

It finally works! Thanks for your help and spotting the missing colon.