Make CSS Changes to only the Mobile or Desktop Version of a Jimdo Website

All Jimdo templates are now responsive out of the box. This means that the content that is on the website is automatically optimized for viewing on both a desktop computer or a mobile device. However, there are instances where you may want to have some slightly different content on one version or the other.  This can be done somewhat easily using the techniques from the How to modify Jimdo templates with CSS tutorial. 

 

Add the content that you want to have on one version of your website and then find the code on how to hide that content using the tutorial. Normally you will identify an ID and set it to display: none; with CSS.  This will hide it for ALL versions of the website. Next, you will need to add some special code called a media query to hide the content in either the mobile or desktop version.  See the examples below:

  



<style type="text/css">
                
/*This syntax will process the included CSS code on the mobile 
version of your website */

        @media (max-width: 768px) {
                #cc-m-header-14441857025 { display:none; }
                h2 { font-size: 24px; }
                // add as much or as little CSS as you like here
        }

/*This syntax will process the included CSS code on the desktop 
version of your website */

        @media (min-width: 768px) {
                #cc-m-header-14441857025 { display:none; }
        }

</style>