Canvas Support

Help with Images on mobile with the slider

3 replies · opened Jan 4, 2019

Ssomebody7Jan 4, 2019

Im having the same issue as this topic - http://support.semicolonweb.com/forums/topic/need-help-with-scaling-problems/

I tried the solutions you provided there, but it didnt help.

This is the code I have:

<section id="slider" class="slider-element clearfix" style="height: 700px; background: url('images/iStock-478302112.jpg') center center no-repeat; background-size: cover;">
<div class="vertical-middle">
<div class="container clearfix">

				&lt;div class="clearfix center divcenter" style="max-width: 700px;"&gt;
					&lt;div class="emphasis-title"&gt;
						&lt;h1 class="font-secondary" style="color: #FFF; font-size: 76px; font-weight: 900; text-shadow: 0 7px 10px rgba(0,0,0,0.07), 0 4px 4px rgba(0,0,0,0.2);"&gt;&lt;/h1&gt;
						&lt;p style="font-weight: 300; opacity: .7; color: #FFF; text-shadow: 0 -4px 20px rgba(0, 0, 0, .25);"&gt;&lt;/p&gt;
					&lt;/div&gt;
					
				&lt;/div&gt;

			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;

Any help would be appreciated. Thank you!

Ssomebody7Jan 4, 2019

here is the pic on a desktop

Ssomebody7Jan 7, 2019

Is anyone ever going to reply?

SSemicolon WebSTAFFJan 11, 2019

Hello,

Thanks for your Patience and Apologies about the Delayed Reply!

We have checked out your Codes and while everything appears to be working correctly, as you mentioned the Images are not scaled properly since you are using an Inline CSS of height:700px; on your Slider which makes the Slider's Height fixed at 700px.

You should consider using the following CSS Code to make the Height flexible on Responsive Devices: 

.device-xl .slider-element { height: 700px; }

.device-lg .slider-element { height: 700px; }

.device-md .slider-element { height: 550px; }

.device-sm .slider-element { height: 350px; }

.device-xs .slider-element { height: 250px; }

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.

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