slider coming on top of next section

Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 July 2018

Dear Sir,

When I try to access my website from Mobile it overlapping on top of next section. I tried to add one dummy emty section too but still it's coming on top of it.

URL - http://demo.graceinternational.in/

Is there any issue with z-index ? Overlap in next concegative section while scrolling in mobile view.

Kindly find the screenshot attached for your reference.

Regards
Suffian Ahmed

Dear Sir, When I try to access my website from Mobile it overlapping on top of next section. I tried to add one dummy emty section too but still it's coming on top of it. URL - http://demo.graceinternational.in/ Is there any issue with z-index ? Overlap in next concegative section while scrolling in mobile view. Kindly find the screenshot attached for your reference. Regards Suffian Ahmed
Vote to pay developers attention to this features or issue.
7 Comments
Order By: Standard | Newest
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 July 2018

Screenshot files...

Screenshot files...
Support Team
Support Team posted this 05 July 2018

Hi,

You specified 743px height for Section with Slider in Phone mode. In the same time Slider has 100vh height specified in Desktop mode (this height is used in all responsive mods until you specify different height). In addition to Slider height you added Slider 200px vertical translate parameter in Phone mode which moves the Slider down. All these settings cause reported issue.

Please note that all control's settings are inherited from Desktop to Phone mode. When you set fixed height to something in Desktop mode this height will be used in Phone mode. But in most of cases the element need higher height in Phone mode. Therefore you need to override desktop height in the responsive modes where encountered a problem.

Thank you,
Olivia

Hi, You specified 743px height for Section with Slider in Phone mode. In the same time Slider has 100vh height specified in Desktop mode (this height is used in all responsive mods until you specify different height). In addition to Slider height you added Slider 200px vertical translate parameter in Phone mode which moves the Slider down. All these settings cause reported issue. Please note that all control's settings are inherited from Desktop to Phone mode. When you set fixed height to something in Desktop mode this height will be used in Phone mode. But in most of cases the element need higher height in Phone mode. Therefore you need to override desktop height in the responsive modes where encountered a problem. Thank you, Olivia
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 July 2018

Please, could you let me know how to override the height in the responsive mode as per my website...

Share CSS to add it so that I can override the changes or just let me know which one I have to change it.

Appreciate your quick support on this one, waiting for your reply.

Regards
Suffian Ahmed

Please, could you let me know how to override the height in the responsive mode as per my website... Share CSS to add it so that I can override the changes or just let me know which one I have to change it. Appreciate your quick support on this one, waiting for your reply. Regards Suffian Ahmed

Last edited 05 July 2018 by Web IT Solutions LLP

Support Team
Support Team posted this 05 July 2018

Hi,

You already did it with Section in Phone mode (743px) but used a wrong value. You need "auto" and you need to remove 200px of "Move vertically" under the Arrange settings of the Slider in Phone mode.

Almost all settings of all controls can be overwritten in responsive modes by simple specifying different parameter in different responsive mode.

Thank you,
Olivia

Hi, You already did it with Section in Phone mode (743px) but used a wrong value. You need "auto" and you need to remove 200px of "Move vertically" under the Arrange settings of the Slider in Phone mode. Almost all settings of all controls can be overwritten in responsive modes by simple specifying different parameter in different responsive mode. Thank you, Olivia
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 July 2018

I have followed your steps but still not able to get the full slider in mobile mode.

But, my slider is moved a bit above and it's not coming fully in size in mobile view... Why?

Check-in demo link in the mobile view from your mobile - http://demo.graceinternational.in/

Please, kindly find the screenshot attached.

Regards
Suffian Ahmed

I have followed your steps but still not able to get the full slider in mobile mode. But, my slider is moved a bit above and it's not coming fully in size in mobile view... Why? Check-in demo link in the mobile view from your mobile - http://demo.graceinternational.in/ Please, kindly find the screenshot attached. Regards Suffian Ahmed

Last edited 05 July 2018 by Web IT Solutions LLP

Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 July 2018

Any updates on my issue... Please ?

Regards
Suffian Ahmed

Any updates on my issue... Please ? Regards Suffian Ahmed
Support Team
Support Team posted this 06 July 2018

Hi,

I see three problems:

  1. Section has fixed height 750px in Phone mode when the Slider has fixed height 100vh (100% of viewport height). These two heights do not match.
  2. Section has 200px Move Vertically parameter in Phone mode
  3. Header has absolute positioning in all modes and it overlaps the Section below. It looks ok in Desktop mode but responsive Header has higher height. It is better to set top margin to the Section with Slider in Phone mode to move it down if needed.

Thank you,
Olivia

Hi, I see three problems: 1. Section has fixed height 750px in Phone mode when the Slider has fixed height 100vh (100% of viewport height). These two heights do not match. 2. Section has 200px Move Vertically parameter in Phone mode 3. Header has absolute positioning in all modes and it overlaps the Section below. It looks ok in Desktop mode but responsive Header has higher height. It is better to set top margin to the Section with Slider in Phone mode to move it down if needed. Thank you, Olivia
You must log in or register to leave comments