Ccochn01Apr 17, 2019
Hello Team.
I just thought I posted? But didn't seem to go through.
How do I increase height size for the slider on mobile view? It seems to be condensing.
Thanks again, I appreciate it ...
NC
Slider on Mobile View
8 replies · opened Apr 17, 2019
SSemicolon WebSTAFFApr 19, 2019
Hello,
You can simply add the following attributes to the .slider-element DIV to set heights according to the Devices:
data-height-xl="850" data-height-lg="800" data-height-md="600" data-height-sm="500" data-height-xs="400"This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Ccochn01Apr 19, 2019
Hello Team,
Am I adding code here, correct?
<section id="slider" class="slider-element boxed-slider">
Like so ... <section id="slider" data-height-xs="400" class="slider-element boxed-slider">
When I placed - it didn't seem to work, slider height is unchanged... But it's increasing whitespace at the bottom.
Am I doing something wrong?
Thank you!
NC
SSemicolon WebSTAFFApr 21, 2019
Hello,
The Code appears to be fine. Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Ccochn01Apr 21, 2019
Hello,
Okay here’s the live link to the home page https://codenyc.net/niles
Was thinking could there be a setting conflict with the boxed slider or full screen class?
Okay Thanks,
NC
SSemicolon WebSTAFFApr 22, 2019
Hello,
Thanks for the Live URL. It has helped us clear the doubts. Okay so the thing is that since you are using the Boxed Slider along with the Flex Slider, the Slider is completely responsive and the size of the Slider depends on the size of the Images. So, in this case you will need to use a slightly customized version of the Slider with the Images defined as Background Images. Consider using the code below:
Notice, that the Height of the Slider is defined on the .fslider Element.
This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Ccochn01Apr 22, 2019
Thank you very for your response this helps much.
I do however have a question. On initial load slider is at correct size: A
But once I refresh screen the slide size changes to B. How do I keep size set to A?
NOTE: Initial load is with cleared cache. Revise screen is not. So this could only bring to conclusion there's a conflict happening somewhere. Okay thanks.
NC
Ccochn01Apr 24, 2019
Think I fixed it!
Placed this style in the header
<style>
#slider .flexslider {
height: 100% !important;}
</style>When refresh photo stays
Thanks...
SSemicolon WebSTAFFApr 24, 2019
Hello,
Thanks for your Patience and Apologies about the Inconveniences caused!
We are not sure why that is happening as we had tested the codes before providing you and it appears to be working fine for us. It appears that the Flexslider plugin is modifying the .flexslider Element's height by adding Inline Styles. So adding the CSS in the Document <head> appears to be a smart solution!
Really Glad that your issues were resolved.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
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