Responsive Design

tmn · Jun 4, 2014

@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 · Dec 7, 2014

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

PHP:

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

PHP:

#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 · Dec 7, 2014

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 · Dec 7, 2014

Brogan said:
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 · Mar 2, 2015

Hi Brogan

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

Code:

<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 · Mar 2, 2015

No, that is not valid CSS.

Claudio · Mar 2, 2015

Brogan said:
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 · Mar 3, 2015

Mouth said:
Do I have the correct usage of the predefined CSS classes ...

HTML:

<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 · Mar 3, 2015

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:

Code:

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

upnet · Mar 17, 2015

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 · Mar 17, 2015

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

erich37 · Mar 20, 2015

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 · Mar 20, 2015

Wrap the text in a div with a named class.

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

Donny · Aug 11, 2015

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 · Aug 12, 2015

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

6CrazyNinja · Oct 19, 2015

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 · Oct 19, 2015

That doesn't appear to be the default editor.

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

6CrazyNinja · Oct 19, 2015

Brogan said:
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 · Oct 19, 2015

Then it's an issue with your custom style.

6CrazyNinja · Oct 19, 2015

Brogan said:
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

Responsive Design

Member

Active member

XenForo moderator

Active member

Well-known member

XenForo moderator

Well-known member

Well-known member

XenForo moderator

Active member

Active member

Well-known member

XenForo moderator

Active member

XenForo moderator

Active member

XenForo moderator

Active member

XenForo moderator

Active member

Similar threads

We value your privacy