Help to style Sllider responsively

Design help General
1

Hello,

I’m wondering if you can point me in the right direction regarding sliders and being responsive.

https://preview.webflow.com/preview/hairb-4ebdf8acd6e7c69480e96a24b96ea7fe?preview=bf399ebb2ad868bc5cc7e1941cde7b0f

I’ve got the slider images to be responsive, however when they respond to the size of the device the actual slider background doesn’t become responsive but only the slider image itself.

771×208 136 KB

As you can see lots of grey area on the slider and the smaller the device the bigger the grey area.

Also when I view the website on mobile landscape and normal the navbar overlaps the slider, I believe this is because the top bar is pulling everything down because it doesn’t fit, however I’m not sure how to fix this.

Hope someone can help as I’m pulling my hair out.

Look forward to your replies.

Matt

2

Hi @Matty

Set the background of the slide to Cover to let it cover the whole slide no matter what.

Here is a video tutorial on how to fix the slider image & the navbar issue you have:
http://quick.as/9vapuO4om

Hope you figure it out! :wink:

3

Hello @DharmaNode @cyberdave @PixelGeek @sabanna

Thanks for the video it was much easier to follow, however doing that removed my fixed nav, so I added fixed nav again but it covers up the slider?

Also why does it look completely different on my phone to then what webflow previous shows? How are we suppose to design websites when we cant go by what the preview is?

I have a number of issues when viewing it on my phone, which webflow shows no issues.

http://hairb-4ebdf8acd6e7c69480e96a24b96ea7fe.webflow.io/

e.g

The website on my phone now has a scroll bar
The mobile menu displays half way down the page.

I’m going to call it a night and look at things again in the morning.

4

“More info container” needs bottom padding of 60px

On your “info” element, remove the height and just set it to AUTO. Also, give that element an overflow:hidden

​Try these steps and let me know if you’re successful. I’ll be standing by for your response! :slight_smile:

Cheers,
Nelson

5

Thanks @PixelGeek

When I set the height to auto everything is that section turns white?

Also, how can I stop the fixed nav overlapping my slider.

Thanks

6

Hi @Matty

Looks like your text is white:

1339×755 110 KB

also, try giving a top margin to your main slider:

1327×599 318 KB

hope this helps :smiley:

7

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