Streaming live at 10am (PST)

Sliders in Mobile Design


#1

I have been having issues making my sliders look good in mobile website. It doesn't seem to be responsive and is kind of just extending outwards off the screen. Any advice ?


#2

Hello @JibbyFlow

Could you share read-only link to your project, please. It will help us to find solution to the problem.
Guide about how to do this you can find here http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573


#3

Thank You for the prompt response. Please take a look at attached link and let me know what you think. I am relatively new to Webflow and responsive design.

https://preview.webflow.com/preview/integratepayments?preview=b8885467ace2e1cb442dbbaafc7cc377


#4

Hi again, @JibbyFlow.

For make site responsive, elements on the site has to have its style setup for every type of device. Sometimes they can be same style (size, color, etc) throuh all devices, but sometimes you will have to change it.
In Webflow Designer mode you can switch between "devices" on the top of the screen:

Right now slider is not responsive because its width set up only for desktop view and it is 950 px. For Tablet view I would recommend to make its width no more than 95% and for mobile view no more than 98%

Plus probably will be useful to go through Webflow tutorial videos >>> http://tutorials.webflow.com for get more information.
For example, this one will explain you principal of cascading styles that using Webflow http://tutorials.webflow.com/intro-series/adding-classes

Hope it helps,
Anna


#5

Hello,

I appreciate your response again. I tried to make the tablet view 95% and it made the images in the slider very small. I also tried to make the mobile view 98% as you suggested and it didn't seem to make any change. Do I need to change the slider name or add another class to each viewport ?


#6

You just forgot that you have pretty big padding there

but you don't really need it. Just remove padding, make slider width for tablet 95% and for mobile no more than 98%.

Regards,
Anna


#7

WOW !!!!! You are Good ! ! ! That fixed it. Awesome. That was getting me so discouraged and annoyed. I can't believe it was that easy. I have another slider on my gateway page. Is it the same thing messing me up there too ? Can you please take look..> Thank You So Much !


#8

I just updated my gateway page as well with the same configuration that you suggested and it all seemed to work. I guess I do not know when and when not to use Margin and Padding still. This is much different web builder than I was used to. It is much better and up to date with the internet today and responsive design so I am excited to learn all that I can about it. It is great to have wonderful people like you to help us beginners !

Thanks Again,

Gabriel


#9

Good to see you figured it out smiley Keep moving!

Yes, Webflow is different from other website builders, because it is grounded on the right structure of site building. It using "box-model", which is ground of the web, it is basic principal how all the web-site built.

For explain margin/padding system I made this picture, hope it helps

Cheers,
Anna


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.