▼
Streaming live at 10am (PST)

Sliders issue for site

Design help General
#1

I am trying to fix the overflow in the header area of my website.
It’s got a big slider. This slider has various images in it. Some stuff is going wrong.

On Desktop, there are a few issues…

  1.   On desktop slide 15, the beginning of slide 16 is visible. This could cause overflow issues.

  2.   Slide 3 desktop line coming off far right

  3.   Slide 2 has something coming off far right

  4.   Slide 4 has a line off top, entering far right

On desktop, slide 2 appears just fine. But on tablet
–> Slide 2 dissapears and is replaced with Slide 3
–> Problem above may be linked to: On slide 1, there is the beginning of slide 2 appearing on the far right. When I click on slider 2, while viewing slide 1, I see the slide 2 somehow exists off the body of slide 1!

Slider 1 issue.jpg1242×621 109 KB

–> More problems: In slide 3, there is the fourth slide
–> There is no slide 4; I click on the slide image, and I can’t move it into view, no matter what I do

The other slides on Tablet is OK.

As for mobile the same ‘Slide 2’ problem occurs: slide 2 dissapears and is replaced with Slide 3. I’m sure there is more wrong with mobile, but at the moment tablet must be fixed it and it trickle down to Mobile.

Any support is appreciated as i need to fix this so i can fix the overflow problem of my website. The slides in the header affect everything!

https://preview.webflow.com/preview/dogwalkerextracom?preview=fad14ef9cf7c35af8542fd6199b44902

#2

Hello, @Elliot

After several tries to fix all issues of that slider I can recommend re-creating that slider from scratch with following principals of responsive web-design:

  1. SLIDE by itself don’t have to be smaller than slider MASK. When slide has width=100% of mask it will prevent situations when NEXT SLIDE showing up next to the previous slide.

  2. Every single slide don’t need different class name. It is enough to create one class for the slide itself and add different images to every slide. If you need some specific settings for every image, it will make sence creating different classes for images, but I don’t think that every single image need that.

  3. I see how much effort and time you put in this site, but what is the reason to keep slider and some other elements width in pixels?

Regards,
Anna

1 Like
#3

Thank you Sabanna.

I feel heartwarmed that I can fix the slides on desktop, through this new method,
which then trickles down to ALL OTHER DEVICES, saving me many hours of struggling.

Wonderful, I will implement this responsive design technique.

A deep question lingers that longs to be answered:
_On my website, I was told that it is best to change every class from Width, to %. This helps it elements to not overflow when they swap over to a different device. _

I have found this to be untrue. For example, if I have a block thats set at 80%, it works fine on desktop,
_then it overflows on the tablet, so i need to change the 80% to a 60%. _

_With my counterargument in italic above, what is your response on the statement _
_“I need to change every class from width to % so elements don’t overflow when swapped to a different device”. _

If it turns out i need to replace width to % to fix overflow, then i’ll need to edit 15 pages on 4 different devices.
That’s hundreds of classes. Thats why i need to this feedback.

-Elliot

#4

You have to understand that when you set “%” measurements for some object it will take % from its parent element size. So, for example, if you will keep section width 1500px and set div inside it to width 80%, then it will be 1500 x 80% = 1200px as long as you keep section 1500px, no matter what device is in the preview.

1 Like
#5

You need to understand basics of “box model” and principles of building a responsive website.

Regards,
Anna

#6

Thank you :slight_smile: I shall move forward with vigor.

#7

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