Picth theme modifiying for mobile

Store Design
,
1

Hi everyone,

I used Pitch theme for our website. In theme editor it lacks the options of editing the mobille version.

I dont want to have the media wiith text in the mobile version, after the slider I would like our products to be shown.

Also is it possible to change the logo when a user scrollls down the page?

Thank you for your help

3

Hi anmol, thanks for your answer but these did not really work. Do you have any idea about why they dont work? I have worked with other templates before and I must say Pinch is really hard to modify for some reasons.

4

Ignore the AI-generated copy/paste.

You can easily have different content shown on desktop and mobile.
Follow this solution – How to upload video on website banner for mobile and dekstop - #5 by tim_1

As for the different logo on scroll – Horizon/Pitch set the data-sticky-state="active" property on <header-component> element, so you can apply some CSS rules based on this. Showing different image would probably require theme code edit(which I do not recommend), but you can resize or apply filter to the same logo…

Something like:

.header[data-sticky-state=active] .header-logo__image-container {
  filter: invert(1);
}
5

Hi @yaseee

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

6

Hey :blush: fellow store owner here.

I’ve dealt with similar theme limitations before it can be frustrating when the mobile editor doesn’t give full control.

From what I know, hiding that “media with text” section on mobile and pushing products up is usually possible, but sometimes it needs a small tweak outside the theme editor. Same with the logo change on scroll — doable, just depends on how the theme is built.

If you’d like, I can take a quick look at how Pitch handles it and share what might be the easiest approach.

7

password is trial

thanks

8

Hi Tim, are you suggesting rather than tweaking the base.css creating 2 different .css for mobile and desktop version? About the logo code I wanted to change the logo when it is scrolled down. It is not a major problem if it will slow down the website I can just ignore it.

9

Nope. It literally says there:

Those CSS rules I shared in a linked post should go into “Custom CSS” setting of relevant sections.
One of the codes will hide section on mobile, another – on desktop.

So if you want to have “media with text” on desktop only – add a code which hides this section on mobile.

The point is – you do not have to edit theme code for this. Also – section “Custom CSS” setting applies to this particular section only, which reduces the likelihood of side-effects elsewhere.