Prevent Load of a Hidden Div

Design help General
1

Hi is there any way to prevent a hidden div from loading on mobile? I have it set to show none, but the div is still loading even though it is not showing. (Which is destroying my load time). Any idea how to fix this?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Need your site url, read-only link, and the div’s name and location.

3

To prevent a hidden div from loading on mobile, you can use a combination of CSS media queries and JavaScript. Here’s an example of how you can achieve this:

  1. In your CSS, define a class for the hidden div that you want to prevent from loading on mobile:
.hidden-div {
  display: none;
}
  1. Use a CSS media query to target mobile devices and override the display property for the hidden div:
@media (max-width: 767px) { /* Adjust the breakpoint to target the desired mobile devices */
  .hidden-div {
    display: none !important; /* Important to override the previous display: none; */
  }
}
  1. In your HTML, add the class to the hidden div:
<div class="hidden-div">Content of the hidden div</div>
  1. Finally, use JavaScript to remove the class from the hidden div if the screen width is larger than the mobile breakpoint:
window.addEventListener('resize', function() {
  var hiddenDiv = document.querySelector('.hidden-div');
  var screenWidth = window.innerWidth;
  var mobileBreakpoint = 767; /* Adjust the breakpoint to match the one used in the media query */

  if (screenWidth > mobileBreakpoint) {
    hiddenDiv.classList.remove('hidden-div');
  }
});

This JavaScript code listens for the window resize event and checks if the screen width is larger than the mobile breakpoint. If it is, it removes the “hidden-div” class from the hidden div, making it visible on larger screens.

Note: This solution assumes that the hidden div is initially hidden using CSS. If you are using a different method to hide the div initially, you may need to adjust the JavaScript code accordingly.