XF 1.2 Notice System - hide from responsive

tommydamic68

Well-known member
I have asked this before, never got a "working" answer - it MUST be possible to hide the notice system on responsive? It looks horrible on a mobile device…

Screen Shot 2014-02-07 at 5.51.33 AM.webp
 
EXTRA.css:

Code:
@media (max-width:@maxResponsiveNarrowWidth)
{   
    .Responsive #Notices.PanelScroller
    {
        display: none!important;
    }
}

If you want to hide it on slightly larger displays too then change maxResponsiveNarrowWidth to maxResponsiveMediumWidth
 
It's more than likely been created with some HTML or CSS that doesn't allow for responsive design.

If you post the content of your notice we'll figure it out.
 
Why? Why is it not automatically responsive with just turning the option on with Xenforo? Also, I see nothing on specifically making the notice responsive in you linked page.

It isn't a magic wand. You can't just turn it on and then put html code or images in a notice that are not responsive and expect it to work.
 
It's more than likely been created with some HTML or CSS that doesn't allow for responsive design.

If you post the content of your notice we'll figure it out.
Yes @Chris Deeming - thats probably right. before going nutty on it, perhaps once responsive it is too small to be effective when viewing on a small device? Any who - here is the code.

Code:
<style type="text/css">
.noticeButtonContainer
{width: 225px;
padding: 10px;}
.csgoIntro
{background: url(rgba.php?r=0&g=0&b=0&a=153); background: rgba(0,0,0, 0.6); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
color: #ffffff !important;
font-size: 14px !important;
text-align: center!important;}
.csgoIntro a
{color: #ffffff !important;}
.csgoIntro h1
{color: #ffffff !important;
font-size: 20px;
font-weight: bold;}

.csgoMember
{font-size: 12px;}
.csgoMember
{color: #ffffff !important;}
</style>

<center>
<img src="http://www.sphynxlair.com/community/styles/sphynxlair/xenforo/forum25.png" style="display:block; width:825px; height:225px;"  title="" />
</center>

<div class="csgoIntro" style="position:absolute; top:0; left:0; height:300px; width:850px;">
    <div style="padding-left: 25px; padding-right: 25px; padding-top:10px;">
       <font size="5">Welcome to Sphynxlair!</font><br />
        <font size="4">Connect with sphynx owners & enthusiasts around the world!</font><br /><br />
            <div style="text-align: left; width: 420px; margin: auto;"><font size="4">Message</font> - Chat & message with other sphynx owners.<br /><font size="4">Share</font> - Share information, photos & video with the community.<br /><font size="4">Search</font> - Search for FREE information about the sphynx cat.</div>
       <center><div class="noticeButtonContainer">
            <label for="LoginControl" id="SignupButton"><a href="http://www.sphynxlair.com/login" class="inner"><b><font color="#141414">Join Now</font></b></a></label>
        </div></center>
    </div>
</div>
 
Yeah, as I thought...

If you read @Brogan's guide there's plenty of things in that code that are just not "responsive".

Fixed widths, e.g.
style="display:block; width:825px; height:225px;"

Do not make for good responsive design.
 
Yeah, as I thought...

If you read @Brogan's guide there's plenty of things in that code that are just not "responsive".

Fixed widths, e.g.
style="display:block; width:825px; height:225px;"

Do not make for good responsive design.
Yeah - I figured so. Honestly, I think a stripped version of the forum is better when on a small device like a cell phone - just too noisy with other "stuff."
 
We use a similar notice but we put the actual text in the first 300 pixels and make sure the first 300px of the image background makes sense on its own and then just add some non-vital stuff to the rest of the notice background image.
 
Top Bottom