Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1327397

    I want to hide the Leaflet map via CSS in /enfold-child/style.css when screen is small.

    I have tried many things like

    @media screen and (max-width 768px) {
    	#footer .container .flex_column #block-8,
    	#footer .leaflet-container,
    	#block-8 > div {
    		display:none !important;
    	}
    }

    But nothing works. Please help me hide the Leaflet map when screen size is smaller than 768px.

    #1327434

    Hey forevershining,

    Thank you for the inquiry.

    You can toggle the visibility of the element by adjusting the Advanced > Responsive > Element Visibility options. You can also apply a unique class name or ID to the element and use it to hide the element on certain screen sizes.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    #1327722

    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.

    #1327856

    Hi,

    Thanks for the update. Could you post a link to where we can see the element which you want to hide please?

    Best regards,
    Rikard

    #1328163

    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).

    #1328169

    Hi,

    Thank you for the link.

    We actually thought that you are using the OSM Leaflet element from the theme. To remove the map widget in the footer container, try to use this css code.

    #footer .widget .leaflet-map {
        display: none !important;
    }

    Make sure to place the code inside a css media query to limit the changes to mobile view.

    Best regards,
    Ismael

    #1328171

    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?

    #1328192

    Hi,

    Thank you for the update.

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code, and make sure to purge the cache or remove the browser history before testing the page.

    Best regards,
    Ismael

    #1328197

    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

    #1328285

    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.

    #1328518

    Hi,

    Thank you for the update.

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

    What do you mean by “nest the CSS declaration”, and why did you copy the whole leaflet.css file? We may need to access the dashboard in order to check the issue properly. Please post the login details in the private field.

    Best regards,
    Ismael

    #1328588

    What do you mean by “nest the CSS declaration”

    I mean wrap the declaration in a media query.

    why did you copy the whole leaflet.css file?

    Because there’s an option in Enfold Extensions -> Leaflet to set the location of ‘css File’. (I have to admit, I don’t really understand what this option is supposed to do, but whatever, I managed to get the map to source the CSS from a copy of the css file in child theme folder.)

    Login details to live website in Private Content below. I’ve been doing development on localhost and haven’t touched the live site in a while. However, the live site does have a leaflet map in the footer which I haven’t been able to hide on narrow-width screens.

    #1328714

    Hi,

    Thank you for the info.

    Did you toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code? We tried to access the dashboard using the login account above but it doesn’t seem to be valid.

    Best regards,
    Ismael

    #1329014

    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

    #1329298

    Hi,

    Thank you for the info.

    We modified the css code a bit and fixed a few errors in the Quick CSS field. We also disabled the Performance > File Compression settings temporarily.

    .header-scrolled .logo img {
       padding-top: 0;
    }
    
    .logo img {
        padding-top: 0px;
    }
    
    @media only screen and (max-width: 768px) {
    	#footer .widget .leaflet-map {
    		display: none !important;
    	}
    }
    

    Please make sure to purge or flush the cache before checking.

    Best regards,
    Ismael

    #1329436

    Thanks for your help. I can confirm that what you did now hides the map on narrow screens.

    Can you now tell me how to make it work using child-theme /wp-content/themes/enfold-child/style.css please?

    Also, I need to ask: did you install a number of plugins? There’s now half a dozen new plugins that have appeared.

    #1329601

    Hi,

    Glad to know that it is now working.

    You can actually copy or move the code from the Quick CSS field to the child theme’s style.css file directly. You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings again after doing so.

    did you install a number of plugins?

    We did not install any plugins, only added and modified the css. Is there anyone else that have access to the site?

    Best regards,
    Ismael

    #1329603

    Hi,

    Glad to know that it is now working.

    You can actually copy or move the code from the Quick CSS field to the child theme’s style.css file directly. You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings again after doing so.

    did you install a number of plugins?

    We did not install any plugins, only added and modified the css. Is there anyone else that have access to the site?

    Best regards,
    Ismael

    #1329877

    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.

    #1330207

    Hi,

    Since the css is working correctly when in the Quick CSS field, it is possible that there are some invalid css code in your child theme’s style.css file. You have to correct those in order to fix the issue. Temporarily, you can just leave the css in the Quick CSS field.

    Best regards,
    Ismael

    #1330375
    /*
     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).

    #1330479

    Hi,

    Thank you for the info.

    The css media query that you copied is invalid, it is missing the only keyword, which we already corrected in the Quick CSS field. This is the correct one.

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
    
    }
    

    Again, you can move it back in the Quick CSS field.

    Best regards,
    Ismael

Viewing 22 posts - 1 through 22 (of 22 total)

You must be logged in to reply to this topic.