• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Responsive notices?

RobParker

Well-known member
#1
For all of our notices we use a background image, usually 940px wide. When there's a sidebar, this gets truncated to 720px by the notice container.

However, with the new responsive design, the notice container will continue to shrink (then briefly enlarge again when the sidebar disappears then shrink again) when making the browser smaller. As there's no easy way (that I know of?) to have a notice background image change when the notice panel shrinks, it'd make sense for us that the notices disappear completely when below a certain resolution. Is that possible?

What would be even better would be the possibility to create "mobile notices" that ONLY show when the resolution is below a certain size. That way we'd have our normal notices above a certain resolution then make these disappear and then how their mobile counterpart (probably without images) when below that resolution.
 

RobParker

Well-known member
#6
Cheers, that'd work for any generic backgrounds we use where the text is added on top, just not for backgrounds with text/images as part of the background.

I still think responsive notices would be pretty useful, maybe move this to suggestions if you think that's appropriate :)
 

melbo

Well-known member
#9
Any way to retain notices on per usergroup (unregistered) criteria but disable notices for mobile sized responsive regardless of usergroup criteria?

I'd like a notice visible to guests on desktop/tablet view but not visible in phone view.

This particular forum has a Google map in a notice but when viewed on an iPhone, the navigation becomes tricky as the map scrolls and it's tough to get to the rest of the forum.

If it's not baked into the notice system or available as a conditional, I'll find a workaround.

Thanks
 

Jeremy

Well-known member
#10
Definitely misread your last post. Edit notices, find:

Code:
<div class="{xen:if @scrollableNotices, PanelScroller, PanelScrollerOff}" id="Notices" data-vertical="@noticeVertical" data-speed="@noticeSpeed" data-interval="@noticeInterval">
Add hiddenResponsiveNarrow in class.