Make the Jumpstart theme more mobile friendly?

New Member
9 0 0

Hi guys,

 

Not sure if i'm the one making a mistake or if this is normal with the theme.

Basically, I used the recommended image size (1920x840) for the video banner and it looks fine on a desktop. But when viewed on a mobile, it's really really bad.

 

You only see a tiny portion of the image, and the banner makes no sense because of how it's cropped.

 

I thought the themes automatically adjusted to the size of the device that's viewing it, but that doesn't seem to be happening in this instance.

 

Is there a way for me to show a different banner on Mobile only to avoid this? or is there a way i can change how the banner gets cropped to make it more mobile friendly?

 

Also, a kinda unrelated question - Is there a way to change the colour of the header bar (the one with home, catalog, etc.)? I can't find a way to change it from white, so i assume it's in the theme file somewhere...

 

Thanks,

T

 

0 Likes

Hello 

Can you please share URL with that image on page so we can suggest you better.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Highlighted
Shopify Staff
Shopify Staff
406 44 69

Hey, @AttractiveToast!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.

 

Jumpstart has a slideshow that is full width. It goes to one edge of the screen to the other. This is made so that the image will always take the full-width of the screen regardless of the device used! However, because of this, it can be quite tricky to ensure that the image looks perfect on both a mobile device and a laptop. This is why, as well, we do not recommend having any text on the slideshow image. It will always get cropped from the side, often hiding the message. Jumpstart slideshow images are up to 1200px wide, so it's best to use an image that is at least 1200px wide, or up to Shopify's upload limits.

 

I would recommend taking a look at this guide, there is also a great video here that will show you some tips & tricks too so be sure to check it out.

Alternatively, you can look at using another theme that doesn't have a full-width slideshow. Free themes with that feature would include:

* Minimal
* Pop 
* Supply 
* Simple

 

Regarding the header bar, as you are using a free Shopify theme, this may be something our Theme's team can help change if you are eligible. In order to check it out, I will just need to verify your account. I will send you an email to the email address attached to this forums account and confirm some security questions about your store. Once you reply to that email, I will get the theme's team to have a look.

 

I hope this helps but let me know if you have any other questions. 

 

Speak soon,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
New Member
9 0 0

Hey, firstly, I've replied to your email.

 

Second, I've tried everything to try adjust how the banner responds to the screen sizes, but i have absolutely no clue how this theme works. Every time i try to edit the code that seems relevant to the image... nothing happens. 

 

Is it even possible to fix this?

0 Likes