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

XF 1.2 Notice System - hide from responsive

Discussion in 'XenForo Questions and Support' started by tommydamic68, Feb 7, 2014.

  1. tommydamic68

    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.png
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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
     
    tommydamic68 likes this.
  3. tommydamic68

    tommydamic68 Well-Known Member

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

    tommydamic68 Well-Known Member

    That worked - Thanks @Chris Deeming
     
  5. BamaStangGuy

    BamaStangGuy Well-Known Member

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

    Brogan XenForo Moderator Staff Member

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

    tommydamic68 Well-Known Member

    Sorry- should have shown screen shot on small device.

    Vertical
    image.jpg
    Horizontal
    image.jpg
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    BamaStangGuy likes this.
  9. tommydamic68

    tommydamic68 Well-Known Member

    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.
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Read the resource.
    Apply the information therein to your notice content.
     
  11. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  12. BamaStangGuy

    BamaStangGuy Well-Known Member

    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.
     
  13. tommydamic68

    tommydamic68 Well-Known Member

    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>
     
  14. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  15. tommydamic68

    tommydamic68 Well-Known Member

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

    RobParker Well-Known Member

    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.
     
    BamaStangGuy likes this.
  17. tommydamic68

    tommydamic68 Well-Known Member

    Sounds good, but too much work...:whistle:
     
  18. russoroni

    russoroni Active Member


    Thanks Chris. You're the man.
     
    Chris D likes this.

Share This Page