Docs

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global Javascript in the Customizer.

 jQuery(document).ready(function($) {
  $('.x-close-content-dock').click( function( e ) {
          e.preventDefault();
         $('.x-content-dock ').hide();
        });
});

Hope that helps.

[rfbarr]

I added that script. It seems to work on the desktop but on the mobile there is no X.

[Paul R]

Hi,

Kindly change the code to this.

 jQuery(document).ready(function($) {
  $('.x-close-content-dock').on("click touchstart", function( e ) {
          e.preventDefault();
         $('.x-content-dock ').hide();
        });
});

Then add this in Custom Css

@media(max-width: 767px) {
.x-content-dock.left {
   max-width:200px;
}
}

Please provide screenshot on how it looks in your end.

Thanks

[rfbarr]

I added that custom CSS and the Java scrip but it broke what was working. I went back and edited the code to the version that worked the best so far. In the current version the styling and X (close) works as intended. In the mobile version the styling is different and the X (close) does not function. I have attached two screen shots one on mobile and one on chrome.

Here is the code I have in my website:

Additional CSS in Theme Customization:

.single .entry-featured .entry-thumb {
   display: none !important;
}

@media (max-width: 767px) {
.x-content-dock {
    display: block !important;
}
}

.x-content-dock.left {
    margin: 0.6em auto;
    left: 0!important;
    right: 0!important;
    background-color: white;
    padding: 0.4em !important;
    
}

Global Java Script in Theme Customization:

 jQuery(document).ready(function($) {
  $('.x-close-content-dock').on("click touchstart", function( e ) {
          e.preventDefault();
         $('.x-content-dock ').hide();
        });
});

Some things I have noticed. On chrome the X button works. The book now button is a red styling is the red links that I have defined in the theme options under Typography.

On mobile the book now button is a blue link styling is taken from the Content Dock options. On mobile the X button does not work.

[Rue Nel]

Hello There,

Could you please update the JS code and make use of this code instead:

 jQuery(document).ready(function($) {
  $('.x-close-content-dock').on("click touchend", function( e ) {
          e.preventDefault();
         $('.x-content-dock ').hide();
        });
});

And please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body .x-close-content-dock {
    z-index: 160000;
}

Please let us know if this works out for you.

[rfbarr]

No change in the function or styling. It works in chrome, but on mobile it can’t be closed.

[Christopher]

Hi there,

Find this code :

@media (max-width: 767px) {
.x-content-dock {
    display: block !important;
}
}

And update it to :

@media (max-width: 767px) {
body .x-content-dock {
    display: block ;
}
}

Hope it helps.

[rfbarr]

Yes!!! That worked. One last question do you know why the styling on the mobile is using the settings in the Content Doc and the Chrome PC/Mac is using the styling from the Typography settings in the customize them options?

[Rue Nel]

Hello There,

Please try to clear your browser cache. You might need to use incognito mode in Chrome browser and test your site again. And since you have installed a caching plugin WP Super Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Please let us know how it goes.

[Author]

Posts