XF 1.2 Notice System - hide from responsive

[tommydamic68]

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…

 

[Chris D]

EXTRA.css:

@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

 

[tommydamic68]

EXTRA.css:

@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

Thanks @Chris Deeming - will give it a go tomorrow morning.

 

[tommydamic68]

EXTRA.css:

@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

That worked - Thanks @Chris Deeming

 

[Brent W]

I am confused why it looks horrible? Should be possible to design a CTA notice for guests that works with responsive design right?

 

[Paul B]

Notices are already responsive.
What is it that's not appearing correctly?

 

[tommydamic68]

I am confused why it looks horrible? Should be possible to design a CTA notice for guests that works with responsive design right?

Notices are already responsive.
What is it that's not appearing correctly?

Sorry- should have shown screen shot on small device.

Vertical

Horizontal

 

[Paul B]

You just need to make your notice content repsonsive.

http://xenforo.com/community/resources/responsive-design.2193/

 

[tommydamic68]

You just need to make your notice content repsonsive.

http://xenforo.com/community/resources/responsive-design.2193/

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.

 

[Paul B]

Read the resource.
Apply the information therein to your notice content.

 

[Chris D]

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.

 

[Brent W]

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.

 

[tommydamic68]

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.

<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>

 

[Chris D]

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.

 

[tommydamic68]

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."

 

[RobParker]

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.

 

[tommydamic68]

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.

Sounds good, but too much work...

 

[russoroni]

EXTRA.css:

@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

Thanks Chris. You're the man.