Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Responsive Design and Conditional Logic


Go to End


6 Posts   2542 Views

Avatar
mhdesign

Community Member, 216 Posts

7 January 2015 at 11:57am

Happy New Year people! Here's a new problem to start 2015 with...

I have a website that uses a Flexslider slideshow. This works well in desktop view, but I would like to hide slideshow on smaller screen sizes and replace it with a static image.

I thought I could put a conditional statement in my template:

<% if $ScreenWidth( < 600 ) %>
       <p> screen is too small</p>
<% else %>
	<div id="slider" class="typography row">
			$FlexSlider(1,960,415)
	</div>
<% end_if %>

But this is now dropping the rest of the page. Can anybody advise how I can express this in terms that SilverStripe can understand?

Thanks

Avatar
acoggins

Community Member, 19 Posts

8 January 2015 at 10:53pm

Edited: 08/01/2015 10:54pm

I'd be trying to do this through css. You could put the flexslider into a <span id="flexslider"> ... </span> and then just hide it using something like:

@media only screen and (max-width: 450px) {
#flexslider {display: none;}
}

Just tried this and it works for me.

Avatar
mhdesign

Community Member, 216 Posts

9 January 2015 at 9:52am

Thanks acoggins, this is actually what I have done. I was hoping there was a better solution like dropping the slider completely on mobile so people don't need to download it. Plus it's creating some sideways movement in my page on mobile devices which isn't the best look! So if I could make it no slider on small devices (ass opposed to hiding the slider) I'd feel happier about it!

Avatar
acoggins

Community Member, 19 Posts

9 January 2015 at 1:11pm

Ah, right. Could you use something like this to call up a different template without the slider?
https://github.com/silverstripe/silverstripe-mobile
"The mobile module provides detection for mobile devices, and can serve a different SilverStripe theme to them. The module can either use redirection to a separate mobile domain, or serve mobile optimised content under the same URLs."

Avatar
mhdesign

Community Member, 216 Posts

9 January 2015 at 1:32pm

Looks interesting! I'll check this out. Thanks!

Avatar
sagarverma

Community Member, 3 Posts

9 April 2015 at 7:17pm

Try changing the values