Jumpstart Theme - Make Slideshow mobile friendly

Solved
Excursionist
22 2 0

Hi everyone,

 

the first section on our page is a slideshow. When viewed from a mobile device, it looks terrible because the logo is over layed of the slideshow images.

 

I'd love to adjust this in a way so that on mobile devices, the header is static and solid, and the slideshow starts underneath. I also wouldn't mind potentially resizing the slideshow to be square, but that is less of a priority.

 

Any help would be much appreciated!

 

The website is www.juvalicious.com and the password thisisjuvalicious

0 Likes
Explorer
55 3 12

In your theme.scss file, you can set a media query to make the header position relative when on mobile or tablet devices, this should push the header up above the slideshow on smaller devices.

 

Capture.JPG

https://drdigitaldev.com Custom Digital Agency Site Built Entirely on Shopify
0 Likes
Excursionist
22 2 0

Hey, thanks for the reply! What I don't quite understand is the following:

 

When I change the position to relative in the site-header, it kind of works. The header is now always above the slideshow (desktop & mobile). If I change the same thing in the code that has a "mobile variation" descriptor - it doesn't do anything. I would have thought that this is the place I can define mobile specific rules.  Do you have any advice on that?

 

 

.site-header {

position: absolute;
z-index: 9999;
width: 100%;
height: 100px;

...


// Mobile variation
&.mobile {
top: 0;
height: 70px;
@include translate3d(0, 0, 0);
}

 

0 Likes

Success.

Explorer
55 3 12

I meant that you would need to add a media query to define the attribute at a different screen size.

@media only screen and (max-width: 600px) {
 .site-header {
    background-color: position: relative;
  }
}

I believe the mobile variation handles when there is an additional logo uploaded specifically for mobile. I may be wrong. But I believe the above should work for specifying specifically for mobile. 

https://drdigitaldev.com Custom Digital Agency Site Built Entirely on Shopify
0 Likes
Highlighted
Excursionist
22 2 0

Thank you so much!

0 Likes