Homepage Slider Not Scale to Mobile

New Member
30 0 0

My site's slider scales with size down to mobile but it makes the image and fonts extremely small. How can I make it so that my slider stops scaling at a certain screen size and cuts off the width?

www.riotsociety.com

0 Likes
New Member
30 0 0

bump!

0 Likes
Shopify Expert
2648 60 642

Hi troy,

the slider in your theme is a thing in itself with its own configurator and whatnot. However, try adding  these rules to the bottom of your  stylesheet.

@media screen and (max-width:600px){
    .fullwidthbanner-container{        
        width:600px;
        left: calc( ( 100% - 600px ) / 2 );
    }
}
.tp-caption {
    font-size: medium !important;
}

You can change 600px (the smallest width to scale the banner to), just change it in all three places.

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

TIM FTW! 

Thanks again. Your code worked!! But for some reason it spills past the right side of the site. Is there a container that I need to change to a max width too?

Also, the .tp caption I'm figuring out, doesn't target all the elements needed for the homepage buttons and titles! 

How would I target those items like in my second slider?

0 Likes
Shopify Expert
2648 60 642

You'd need to add this to fight overflow:

.main-slider.dqq {
    overflow-x: hidden;
}

 

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

Dope that works! I'm sending you two shirts btw, you are a god.

If its not one issues but the next... the arrows dont scale down with the image and the captions arent scaling :(

0 Likes
Shopify Expert
2648 60 642

Yes, I noticed the arrows are not visible, but I expected (wrongly) the slideshow to be swipe-able on mobiles, so did not pay much attention to this. Now, that I tested this on my phones, there are a couple of things I'd like to amend

1. These calc attributes did not work on my old android phone. Fine on iphone, even the old one. Had to redo the logic.

2. Arrows. Amended the position, work fine on desktop with small window, but are not showing on mobile anyway, probably were not ment to -- they are shown on hover, which does not exist on touchscreen?

So overall the code will be like this:

.main-content { overflow-x: hidden; }
@media screen and (max-width:1000px){
    main .main-slider.dqq {
       overflow-x: visible;
       position: relative;
       left: -500px; /* half of the minimal banner width */
       width: 100%;
    }
    .fullwidthbanner-container{
        width: 1000px;
        left: 50%;
    }
	.tp-leftarrow  {  left: calc( ( 1000px - 100vw ) / 2 ) !important; }
	.tp-rightarrow { right: calc( ( 1000px - 100vw ) / 2 ) !important; }
}
.tp-caption { font-size: medium !important; }

Finally, I really think there is a checkbox somewhere in the slider customizer to do all this in one click, we just do not have access to it :).

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
New Member
30 0 0

There actually isn't because the people who made the theme just took the code from Revolution slider and used it instead of the actual slider customizer :(

DUDE. TIM. U THE MAN.

Sent you an email <3

0 Likes
Tourist
15 0 2

I bumped into this thread while looking for 'scaling down images'....Tim, I wish there were more people like you. Absolutely, hat's off to you bro for taking the time to help someone out without demanding compensation. ;-)  btw....you both have great looking websites!!!!

0 Likes
New Member
2 0 0

Hi Tim,

Hope you've been well!

Am also trying to do the same with the slider on my home-page:

www.10inchsoldier.com (password: soldier1010)

I did try using the code which you provided to Troy, but unfortunately no luck,

The theme I have installed is using flexslider, which I'm guessing might operate a little diferently in the backend compared to Troy's?

Would you by any chance have any idea how I might be able to tweak my code to get my slider to stop scaling at a certain screen size and cut off the width also?

Big thank you in advance, appreciate your time and help. Looking forward to hearing back from you :)

Best regards,

Gareth

0 Likes