issue with responsiveness - Jumpstart Theme

Highlighted
New Member
9 0 0

Hi guys,

I think this is my 4th time asking for help on this subject? So, I've been having trouble making my site (using Jumpstart Theme) look decent on Mobile view. The main issue was that the banner for the video section was cropped to barely anything on a mobile, which made it look terrible. Originally, I wanted to just show a completely different banner for mobile (if that is possible, PLEASE let me know.).

 

but, after digging for ages to do that myself, i didn't manage. So my Plan B was to make it look nicer on mobile with the same image.

 

So, after some digging i managed to edit an area of the 'Parallax Functions' page to edit how it looks on mobile and desktop. This is the script now:

 

// Parallax functions

.parallax-bg {
  position: relative;
  overflow: hidden;
}
.prlx-bg {

  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width:100%;
  height: 100%;
  @include bgimg();
  
        @media (max-width: 500px) {
          	position: absolute;
          	top: 80px;
                left: 1px;
  	        height:170px;
      }
      @media (min-width: 700px) {
              width:100%;
  	      height:100%;
      }

The main changes are the 'media' ones.

 

 

Now it worked, but I'm left with a huge space below the image on mobile view, and a not so big gap on desktop view. See the screenshots below:

Shop view.pngDesktop View (not large space)mobile View.jpgMobile view(large space)

So, my question now is twofold. 1, Any idea how i can edit this white space? Or 2, is there a better way to achieve what I'm currently trying to do?

 

Please help.

Thanks,

T

0 Likes
Shopify Expert
153 37 59

@AttractiveToast

 

Are you wanting the banner to be linked to a video? What's happening is that the video-container is setting the height and creating the blank space below because your image is not positioned (or the right dimensions) to fill the entire content area. If you're wanting to use images on the hero banner and not video, I would recommend using the Slideshow block instead.

 

Yes, there is a way to have mobile and desktop specific banners. However, this does take a little customization and creation of a block within that section. I would be more than happy to help you with this. Private message me and we can setup a time to discuss further. 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
Astronaut
1014 131 241

Can you post a link to your store? It's a little hard to tell what's going on with just a snippet of SCSS.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Expert
153 37 59

@AttractiveToast

 

I see that your image itself has the whitespace on the bottom: https://cdn.shopify.com/s/files/1/0263/5271/3821/files/wegotyoua_1512x.png?v=1564944855

 

Cropped that down and try again. Let us know after that because once removed, you still might need to make some css adjustments. Will take a look once you get that image cropped down. 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Shopify Expert
153 37 59

@Ninthony

 

His store url is ellebela.com 

 

He does have the whitespace attached to the image itself. Though, once he crops that out, he might need some other css adjustments. We will see. Here is a link to his bg img: https://cdn.shopify.com/s/files/1/0263/5271/3821/files/wegotyoua_1512x.png?v=1564944855

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes