Adding mobile image to "Image with text" - Broadcast theme

Solved
berokarabay
Tourist
12 0 3

Hello,

I have been searching for solution but could not find it yet.

I need separate mobile images to "Image with text", otherwise photos are being cut off on mobile. Here is my website.

Hope someone might be able to help.


Thanks for your help!

0 Likes
PeanutButter
Shopify Partner
330 65 136

I will send detailed steps for this tomorrow

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
berokarabay
Tourist
12 0 3

hello @PeanutButter,

thank you for your return!

looking forward to hear back from you.

 

0 Likes
PeanutButter
Shopify Partner
330 65 136

This is an accepted solution.

Finally @berokarabay wanted this for the Image with Overlay section.  The solution I implemented was to:

  1. Add 3 new fields image_mobile, parallax_mobile and height_mobile, by editing the section's schema. These 3 settings can now be controlled for mobile independently
  2. Copied all the liquid/html from the section and paste it below, repeating the code block
  3. Modified the "copy" of the the section code to call the image_mobile, parallax_mobile and height_mobile instead of the image, parallax and height
  4. Added a index-hero--desktop class to the original code block
  5. Added a index-hero--mobile class to the new code block
  6. Hide index-hero--desktop on mobile resolutions and hide index-hero--mobile on desktop resolutions using media queries

Cannot paste the code here as this is a paid theme.  

If someone else needs this customization write to hello@peanutbutter.es and we may be able to assist you.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es