Responsive Design

[tmn]

@Arty and @Brogan :
Sorry because just delete question, i found solution here: http://xenforo.com/community/threads/fixed-width-and-responsive-at-the-same-time.56451/#post-606879

 

[ogirginc]

I wanted to make header hight responsive so I used this one:

.MyContent {
float: right;
}

<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        .MyContent {
        float: none;
        text-align: center;
        }
    }
</xen:if>

and changed it a bit to look like this:

#header
{
    height: 400px; 
} 

<xen:if is="@enableResponsive">
    @media (max-width:640px) { 

       #header {
 
    height: 200px; 
    } 

    }
</xen:if>

It seems to be working but still wanted to ask if my implementation is correct/good?

 

[Paul B]

Yes, that will work.

The header height will be 400px until the the width drops below 640px, at which point it will be 200px.

 

[ogirginc]

Yes, that will work.

The header height will be 400px until the the width drops below 640px, at which point it will be 200px.

Yep, that is what I was trying. Thanks a lot!

 

[Claudio]

Hi Brogan

Could you please let me know if this code is ok?

<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        <xen:hook name="header_right_big" />
        }

    @media (max-width:610px) {
        <xen:hook name="header_medium" />
    }

    @media (max-width:480px) {
        <xen:hook name="header_small" />
        }
</xen:if>

Thank you!

 

[Paul B]

No, that is not valid CSS.

 

[Claudio]

No, that is not valid CSS.

can HTML code be used instead of CSS? I just need to show images depending on the screen size

 

[Claudio]

Do I have the correct usage of the predefined CSS classes ...

<div class="visibleResponsiveFull visibleResponsiveWide">
  <div id="bsap_1286480" class="bsarocks bsap_a7ac845a1568bf4e1a00976b9a439ae5"></div>
</div>

Desired Outcome: My BuySellAds 728x90 banner ad's will only display if the client browser display is within Full or Wide specifications, and the banner ad will not show for Medium and Small dimensions client browsers.

Thanks.

Have you been able to get a solution?

 

[Paul B]

The main resource explains how to to do it using media queries or the predefined classes.

If you want to hide something at the narrow width for example you use:

<div class="hiddenResponsiveNarrow">
    Content here
</div>

 

[upnet]

Upnet dumb question #80:
Can I use <xen:if is="@enableResponsive"> in an ad_template and have it show an <img> if the page is not responsive?

 

[upnet]

Aha I read the previous couple of posts and figured out to use the class <div class="visibleResponsiveFull">

 

[erich37]

can somebody please post the code in order to achieve the "Notices" with images and text as Kier is showing in this video ?
But having it also show properly in "responsive". Probably so that the text is disappearing in "mobile view" ?

https://xenforo.com/community/threads/notices.18390/


Many thanks!

 

[Paul B]

Wrap the text in a div with a named class.

Use a media query to display:none at the desired width.

 

[Donny]

Lads,

If I want to show a menu button only on something bigger than tablet screens, am I using the following?

<xen:if is="@enableResponsive">
@media (max-width:800px) {
.MyContent {
float: none;
text-align: center;
}
}

STICK MY CONTENT HERE FOR MOBILE?
</xen:if>

I don't think I understand it.

 

[Paul B]

You need hide the div for the button on screens lower than 800px, using display none or one of the predefined classes.

 

[6CrazyNinja]

sorry to bump an old thread..

Ive just done an upgrade.. my theme has taken well... however I have noticed add reply background to the editor is not responsive..

Would anyone be able to point me in the right direction of what template / css sheet to edit to fix this ?

 

[Paul B]

That doesn't appear to be the default editor.

You would need to seek support from the style or add-on author.

 

[6CrazyNinja]

That doesn't appear to be the default editor.

You would need to seek support from the style or add-on author.

It's the same issue with the default editor too.

It's not the editor that's the problem but the background box the editor is placed in..

 

[Paul B]

Then it's an issue with your custom style.

 

[6CrazyNinja]

Then it's an issue with your custom style.

I am aware of that.. hence I am asking for advice to where in the template I can look in the style to troubleshoot this