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

Responsive Questions

Discussion in 'Styling and Customization Questions' started by TeflonDon, Jun 19, 2013.

  1. TeflonDon

    TeflonDon Well-Known Member

    Couple questions regarding responsive styles....first are there any good resources I should read on here before I bug people with basic questions? I haven't had experience with coding responsive styles before. :(


    Logo: How can I specify an alternative logo for mobile browsing or atleast scale down my regular logo?

    Hiding: Whats the best way to hide things that I don't want to be displayed for mobile users?


    Thanks.
     
    Bram likes this.
  2. Janmaat

    Janmaat Active Member

    I'm very interested in the answer for this too.
     
  3. napy8gen

    napy8gen Active Member

    I am also interested, otherwise I cannot move on.
    I need the conditional statement, IF NOT mobile USE this code.

    I saw the top viewport conditional statement but it is not working when I put a copy of it below the body tag
    like this.

    @Mike any help please.

    HTML:
    <xen:if is="@enableResponsive AND !{$noResponsive}">
    this is responsive
    <xen:else />
    this is not
    </xen:if>
    I need this if statement, because ONLY then I can strip down my design code for mobile user.

    Also for other user to use another logo etc or another banner image.
     
  4. TeflonDon

    TeflonDon Well-Known Member

    Glad I'm not the only one.

    Anyways after some googling I found some info and now I use this code to hide things on mobile. I have it in my extra.css

    Code:
    @media (max-width: 800px) {
      #hidediv {
      display:none !important;
      }
    }
    I wrapped what I wanted to hide with
    Code:
    <div id="hidediv">
    image i wanted hidden
    </div>
    Not sure if its proper coding but it works.
     
  5. CyberAP

    CyberAP Well-Known Member

    I see 2 ways to solve this problem:

    1. Play with the width of your logo.
    2. Replace logo image

    For the first option you simply need to write this in your extra.css:

    Code:
    #logo img
    {
      max-width: 100%;
      height: auto;
      width: auto;
    }
    We can also center our logo:

    Code:
    @media (max-width:@maxResponsiveNarrowWidth)
    {
    body #header .pageWidth .pageContent
    {
      text-align: center;
    }
    
    #header #logo
    {
      float: none;
      display: inline-block;
    }
    }
    As for the second option it is harder but still possible.

    Code:
    @media (max-width:@maxResponsiveNarrowWidth)
    {
    body #logo img
    {
      display: none;
    }
    
    body #logo span
    {
      width: 200px;
      height: 40px;
      display: block;
      background-image: url(your-image.png);
    }
    }
     
    Last edited: Jun 22, 2013
    Andy.N, Moddis, Janmaat and 4 others like this.
  6. Sheratan

    Sheratan Well-Known Member

    I have a banner inside ad_below_top_breadcrumb

    Code:
    <xen:hook name="ad_below_top_breadcrumb" />
    <xen:if is="{$contentTemplate} == 'forum_list'">
    <div id=banner><img src="/some.pic.jpg"></div>
    </xen:if>
    How to make it responsive? I have tried this code:

    Code:
    #banner img
    {
      max-width: 100%;
      height: auto;
      width: auto;
    }
    But it doesn't working.

    Any help will be appreciated. :)
     
    Last edited: Jun 23, 2013
  7. Janmaat

    Janmaat Active Member

    That works excellent. Thanks a lot @CyberAP

    Instead of display: none I used a smaller size for the logo e.g. width: 100px
    That makes me quite happy :)

    But would be great if this would be a core feature in order to allow larger logos to be shown in responsive mode too.
     
  8. CyberAP

    CyberAP Well-Known Member

    Give me a link to a forum, I'll see what I can do.
     
  9. Sheratan

    Sheratan Well-Known Member

    How about my forum?
     
  10. CyberAP

    CyberAP Well-Known Member

    It's not responsive.
     
    Sheratan likes this.
  11. Sheratan

    Sheratan Well-Known Member

    My mistake. It's responsive right now and the code above is working. Thank you for your help.
     
  12. Moddis

    Moddis Active Member

    Thanks, the first option works pretty good. However, I have one case where it does not help me much in and was wondering if you would know a solution for that as well.

    My logo is almost a square and its aligned to the left so even on the smallest screens, the width does not ever need to decrease. The issue with that is that on a small screen that square takes up at least half of the screen. Is there a way to somehow shrink it (height and length) proportionally to the width of the forum page?
     
  13. CyberAP

    CyberAP Well-Known Member

    You mean to make it even smaller? Adjust the max-width property, like max-width: 85%; and include all the code in a media query.
     
  14. CyberAP

    CyberAP Well-Known Member

    Last edited: Jun 26, 2013
  15. tommydamic68

    tommydamic68 Well-Known Member

    After adding this code to the extra css, my logo shows when i hold my phone horizontal ,but when turing the phone vertical, it does not show the logo. Any suggestions?
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    That's what the code does - replaces the logo with a background image for narrow views.
     
  17. tommydamic68

    tommydamic68 Well-Known Member

    Is there a way to just make the logo smaller to fit the vertical view?
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

    It shrinks automatically.

    Or use media queries or the resource cyberap posted earlier in the thread.
     

Share This Page