Dawn Theme - Can I remove a video custom liquid section from Mobile?

Store Design
, ,

Topic summary

A user implemented custom liquid code to display a video at the top of their landing page but wants to remove it on mobile devices due to performance concerns.

Proposed Solutions:

  • Multiple community members provided CSS media query code to hide the video on screens smaller than 700-750px
  • The code targets the specific section ID and sets display: none for mobile viewports
  • Users should add the CSS to the bottom of base.css or index.css file in the Assets folder

Important Caveat:

  • Simply hiding the video with CSS does not improve performance—the video still loads in the background
  • One responder referenced an article explaining why hiding videos on mobile doesn’t solve performance issues

Additional Recommendations:

  • Address render-blocking resources (CSS/JavaScript) that slow mobile performance
  • Implement lazy loading for images and videos
  • Inline critical CSS and defer non-critical JavaScript
  • Use tools like Google PageSpeed Insights to identify optimization opportunities

Resolution: The original poster confirmed one of the CSS solutions worked perfectly for their needs.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I have the following custom liquid code that puts a video at the top of my landing page:-


video {

display: block;
margin: 0 auto;
width: 85%;
height: 60%;
}



Is it possible not to display/load this section when on Mobile as the speed really suffers?

Many thanks in advance for any replies,

Alun

https://www.snowdoniahoney.com

2

Hey,

NOTE: This code removes the video on screen smaller than 700px but does not improve performance

Please see this article to understand better.

https://speakofthedevrel.cloud/2020/01/06/hiding-videos-on-the-mbile-web/

Please go to Online store > theme > actions > edit code.

Find assets folder > index.css or base.css file.

At the bottom of the file add this code.

@media screen and (max-width: 700px) {
  #shopify-section-template--19592360198454__c67927fd-936d-4517-8adb-eba98065b36a {
    display: none;
  }
}

Hope that helps,

3

Hello @Alun ,

You can modify the code like this:

Let us know if you find anything

Transcy

2 Likes
4

Hi @Alun

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 750px) {

#shopify-section-template–19592360198454__c67927fd-936d-4517-8adb-eba98065b36a {display: none}

}

Regards,

San

5

Great! Many thanks @Transcy that worked perfectly

1 Like
6

The Major issue causing Poor Mobile Performance is Render Blocking-

To solve render-blocking issues, you need to identify and address the resources that are blocking the rendering of your web page. Render-blocking resources are CSS and JavaScript files that prevent the page from loading and displaying content until they are fully loaded. Here’s a step-by-step guide to help you resolve render-blocking issues:

1- Identify Render-Blocking Resources: Use tools like Google PageSpeed Insights, Lighthouse, or GTmetrix to identify which CSS and JavaScript files are causing render-blocking issues on your website. These tools will provide specific suggestions on what resources need to be optimized.

2- Load Critical CSS Inline: Critical CSS contains the styles necessary for the initial rendering of the above-the-fold content. Inline critical CSS directly into the HTML header to ensure it loads before any external CSS files. This way, the page can display a styled version even before the full CSS is loaded.

3- Defer Non-Critical Javascript: Delay the loading of non-essential JavaScript files that are not required for the initial rendering of the page. You can use the “defer” attribute in the script tag or load JavaScript asynchronously to prevent it from blocking rendering.

4- Use Async or Defer for Third-Party Scripts: If you have third-party scripts (e.g., analytics, chat widgets) that are not essential for the page’s initial display, use the “async” or “defer” attributes in the script tag to prevent them from blocking rendering.

5- Preload Critical Resources: Use the “preload” or “prefetch” HTML tags to indicate resources that should be loaded early in the page loading process. This can help browsers prioritize the loading of critical assets.

6- Lazy Load Images and Videos: Implement lazy loading for images and videos so that they load only when they are about to come into the user’s viewport.

7- Review Third-Party Scripts and Plugins: Evaluate the necessity of third-party scripts and plugins. Remove any that are not crucial for your website’s functionality to reduce render-blocking issues.

if you are not familiar with coding, You can use this tool too - https://websitespeedy.com , this tool will automatically resolve render blocking issues and implement lazy loading to give to faster website.