Boundless theme is not mobile friendly

New Member
4 0 0

Hello.

I use the Boundless theme and it looks great on my PC, but then I checked and on mobile it was a disaster.

The homepage slide pictures weren't resized to fit the mobile.

How can I fix it?

0 Likes
Shopify Partner
385 0 49

Hello Danielle,

It does not work great on desktop either as the hero slider is mainly made for bleeding, so if you scale the browser window you will have similar issues as in mobile.

There is a way you could sort it, but its less than ideal and personally I would suggest you to keep away with adding text to the hero images. Adding it as actual html might be an better option.

If you want to try the fix, navigate to the theme files -> Assets -> theme.scss.liquid and replace the lines 2410 to 2416 with (do make a copy of the theme if you not happy with the changes):

  .hero__image {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }

This scales the image to the largest size such that both its width and its height can fit inside the content area and centers it inside the div.

Kasimir

"Good design is good business"
0 Likes
New Member
1 0 0

Is there a 2019 update for this?

0 Likes
Shopify Expert
2674 65 664

In 2019 you can use a recent version of the theme -- they have a "Slide height" option for Slideshow section, which you can set to "Adapt to first image".

Then slideshow will resize without cropping as your browser width changes.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
2 Likes