Different Featured Collection Designs for Desktop and Mobile (ATEILER Theme)

Shopify Masters
1

Hello Shopify Community,

I want to display the Featured Collection section with different designs on desktop and mobile.
I was able to solve this for the hero section using a simple CSS code, but the same method doesn’t work for Featured Collections.

My goal:

  • One design on desktop

  • A different design on mobile

  • Show/hide them separately

Is it possible to solve this with a short CSS code, or do I need to modify it through the code editor?

Any advice would be greatly appreciated, thanks!

1 Like
2

Having the same section twice but displaying them each depending on the screen width…

Use 2 separate @media queries, one with min-width, one max-width,
Each having the correct selector (the section ID),
Both having the same property display: none

One is hidden on desktop
One is hidden on mobile

2 Likes
4

Here is a small followup to what @Howie10 suggested with CSS codes:

This is fine for “Collection banner/header”, “collection description” or other similar section.

However, I would be very careful if doing this with “Collection grid” section, especially when you have many product cards per page. Rendering items twice will delay your page rendering server-side and this is TTFB speed metic which is the base of several others.

Also, if different size pagination in 2 sections – can be interesting.

1 Like
6

Hey The_ScriptFlow,

my store url is:

P.S.

The website you have logged into is currently live and has been created using the Dawn theme.

I am working on another theme in the background.
That is why I am also sending you a link that will be valid for a few days. And the question I asked applies to the website you see on this link.

8

Dear The_ScriptFlow,

I really appreciate but for security reasons, I’m not able to share collaborator access.

However, you can share the full CSS/HTML solution here along with clear instructions on:
– which file it should be added to
– and exactly where it should be placed.

I will apply the changes on my end.

Thank you for your understanding.

10

To display different ones, use the following CSS code:

// Normal CSS-Code for desktop user

@media screen and (max-width: 767px) {
// Mobile CSS code
}

Keep in mind that you are building on the HTML structure of the existing section.

Otherwise, you can also create two sections and display one on the desktop and one on mobile (display: none;).

11

I understand your point.

In that case, I will break the task into small parts and share them here step by step, instead of giving collaborator access.

Thank you for your understanding.

1 Like