Canvas Support

index-onepage.html How to control when 'slider' changes from full screen to pr

3 replies · opened Nov 1, 2017

ZZKM128Nov 1, 2017

Dear Author,

I am using index-onepage.html file as a template for designing my website.
Regarding the 'slider-parallax full-screen with-header' - the slider control which appears at the top of the page,
This slider control appears as a full screen slider when users view the web page in full screen mode (1920px wide) but when the screen width becomes narrower it hides/cuts the left and right side of the slider image. Then when the screen width becomes even narrower, (below 770px approx) the slider doesn't take the whole screen area but appears at top of the browser window/web page without cutting/hiding the slide images and shows the whole image proportionally and also the web page contents below the slider "We are CANVAS one of the..."

I would like to control the browser width at which the slide control becomes smaller and stay at the top of the page with text contents below it (in this example, 770px). I want the slider to stay at the top of the page when browser width is about 1000px.

Please look at the image I have attached. If this can be done, please explain to me how.

Thank you.

SSemicolon WebSTAFFNov 1, 2017

Hello,

This is Definitely Possible! You can definitely define your Custom Fixed Heights for different Devices using the Responsive Heights Functionality:

data-height-lg – Height for Large Devices >=1200px

data-height-md – Height for Medium Devices >=992px to 1199px

data-height-sm – Height for Tablets

data-height-xs – Height for Landscape Mobiles or Phablets.

data-height-xxs – Height for Portrait Mobiles

So to change the Height of the Slider from iPad Devices, you can simply use the following code:

This will surely work fine. Hope this Helps!

Meanwhile, since the Slider Images are actually Background Images, the cutting of the Images from the Left/Right Sides cannot be controlled since the Best Fit of the Images are shown keeping the focus on the center of the Image. So, adjusting the Height of the Slider as mentioned above should automatically work fine.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

ZZKM128Nov 7, 2017

Thank you for your answers.
But I am still having problems.
When the slide image control is in the data-height-xs and data-height-xxs mode, the slide background image appears proportionally reduced in size and appears at the top of the page with other page contents shown below, which is exactly what I wanted.
But when the slide image control is in the data-height-md and data-height-sm mode, it simply cuts the edges of the background image rather than reducing the size of the background image proportionally and even if I specify the height as data-height-sm="300" it cuts the bottom and left and right edge of the background image significantly, rather than reducing the image size proportionally and showing it at the top of the page.
So how do I make slide control to reduce the background image size proportionally when it is in md or sm state?

SSemicolon WebSTAFFNov 8, 2017

Hello,

Thanks for your Patience! You can simply use just the data-height-sm, data-height-xs and data-height-xxs and leave all the other Attributes as they will automatically get the Full Screen functionality added to them which will make the Background Images appear fine. Moreover, the Background Size is controlled by the background-size: cover; CSS Property which makes your Background Image fit in the best way possible according to the Dimensions defined by you, so this is something we cannot control. The only thing you can control is the data-height-sm Value which will make the Background Size fit according to your needs. You can set your Value by calculating the Aspect Ratio here: https://andrew.hedges.name/experiments/aspect_ratio/ based on your Image Dimensions and the Height Value you need to set since this will make sure that the Background Images are set appropriately.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard