To hide the the description on mobile you need to find out what class it has (for example .collection-hero__description).
Once you've identified the class, you can use CSS media queries to hide the element. These queries apply styles based on the device's screen size. For mobile devices, a common practice is to target screens smaller than 768px. Here's the CSS you can use:
@media only screen and (max-width: 768px) {
.collection-hero__description {
display: none;
}
}
This code snippet ensures that any element with the class .collection-hero__description
will be hidden when the screen size is 768 pixels wide or less, which typically covers most mobile devices.
To add CSS to your Shopify template, follow these steps:
-
Log into your Shopify Admin Panel:
- Go to your Shopify store's admin panel by logging in at
yourstorename.myshopify.com/admin
.
- Go to your Shopify store's admin panel by logging in at
-
Navigate to the Theme Editor:
- Once in the admin panel, click on 'Online Store' which is usually found in the left-hand side menu.
- This will show you a list of your themes. Find the theme you want to edit and click on the 'Actions' dropdown next to it.
- Select 'Edit code' from the dropdown menu.
-
Find or Add the Relevant CSS File:
- In the theme editor, under the 'Assets' folder, look for your main CSS file. This could be named something like
theme.scss.liquid
orstyles.scss.liquid
. - If you don't have a main CSS file, you can create one by clicking 'Add a new asset', then 'Create a new asset', name it (like
custom.css
), and click 'Create asset'.
- In the theme editor, under the 'Assets' folder, look for your main CSS file. This could be named something like
-
Add the CSS Code:
- Open the CSS file (either the existing one or the one you just created).
- Paste the CSS code at the end of the file:
@media only screen and (max-width: 768px) { .collection-hero__description { display: none; } }
- This will ensure that the
.collection-hero__description
class is hidden on mobile devices.
-
Save Your Changes:
- Click 'Save' in the top right corner after you've added the CSS.
-
Check Your Work:
- It's a good practice to preview your changes. You can do this by clicking on the 'Preview' button in the theme editor.
- Check the site on a mobile device or use the device toolbar in Chrome DevTools (by right-clicking on your site in the browser, selecting 'Inspect', and then toggling the device toolbar) to simulate a mobile view.
By following these steps, you should be able to add the necessary CSS to your Shopify template to hide the .collection-hero__description
class on mobile devices. Remember, after making changes to your theme, always check your website's functionality across different devices to ensure everything works as expected.