Responsive Design

BruceW · Mar 11, 2014

This works great, thank you.

Have you considered adding the same functionality for wide displays? I will likely be adding a third image to http://JetBoaters.net to support wider displays. It would be great to use your add-on to do so.

Thanks Again!

Paul B · Mar 11, 2014

This isn't an add-on.
It's a guide for how responsive design works in XenForo.

You an adjust the three settings to suit in Style Properties.
You can also use absolute values in media queries to achieve whatever you want.

BruceW · Mar 11, 2014

@Brogan, sorry I thought I was posting in the Respollo discussion.

Could you provide a snippet of code and the name of the template I should add it to, to change the logo image for maxResponsiveWideWidth?

Thanks, I am new at css and zen coding.

Paul B · Mar 11, 2014

Just use @media (max-width:mad:maxResponsiveWideWidth) and add the class and styling you wish.

BruceW · Mar 11, 2014

@Brogan, sorry but that does not mean anything to me, I have not yet picked up the lingo. I appreciate your help

I want to insert something along the lines of

background: @primaryLightish url('http://jetboaters.net/JetBoatersBanner.1920.jpg') no-repeat left;

Conditionally for WideWidth.

My ideal solution would be to use three if statements in logo_block to specify the specific logo image file. I believe that conditionally setting the value of @headerLogoPath would work.

Paul B · Mar 11, 2014

There are examples in the resource explaining how to do that.
Just substitute the example classes for your own.

BruceW · Mar 11, 2014

@Brogan, I lack sufficient understanding of how XenForo coding works to get where I need to from http://xenforo.com/community/resources/responsive-design.2193/ .

I have been trying all day. Is there any chance that you could provide more specific assistance?

Paul B · Mar 11, 2014

This is taken directly from the resource content:

Code:

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
        .MyContent {
        color: red;
        }
    }
</xen:if>

Change .MyContent to whichever CSS class you want to work with, e.g. #logo img.
Then change color: red; to the actual CSS you want to apply, e.g. background: @primaryLightish url('http://jetboaters.net/JetBoatersBanner.1920.jpg') no-repeat left;

Resulting in:

Code:

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
        #logo img {
        background: @primaryLightish url('http://jetboaters.net/JetBoatersBanner.1920.jpg') no-repeat left;
        }
    }
</xen:if>

BruceW · Mar 11, 2014

@Brogan, I really appreciate the code. Now further demonstrating my newness, what template should I add this to?

Paul B · Mar 11, 2014

EXTRA.css

BruceW · Mar 11, 2014

@Brogan, thank you.

I added the code to extra.css and now I see the following code in css.php in my browser.

@media (max-width:1450px) {
#logo img {
background: #65a5d1 url('http://jetboaters.net/JetBoatersBanner.1920.jpg') no-repeat left;
}

Unfortunately the logo does not change. I have tried reducing the max-width value.

The code below

@media (max-width:480px)
{
body #logo img
{
display: none;
}

body #logo span
{
background: #65a5d1 url('http://jetboaters.net/logoblack60.png') no-repeat left;
margin: 5px;
display: inline-block;
vertical-align: middle;
/* ← don't forget to set width and height */
width: 241px;
height: 60px;

}
}

Works for mobile logos.

Do I need to add

body #logo img
{
display: none;
}

Any suggestions?

BruceW · Mar 12, 2014

I modified Respollo and switched from max-width to min-width.

It works fine now.

Mackeral_Fillet · Mar 13, 2014

Hi.

Thanks for the guide.

I'm trying to reduce font size for responsive using this but its not working:

Code:

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        .nodeText {
        font-size: 9px !important;       
    }
</xen:if>

Any ideas what I need to change?

Paul B · Mar 13, 2014

Which font size?
Are you sure that is the correct class/selector?

Mackeral_Fillet · Mar 13, 2014

Font size for the nodeText - pretty sure that's the right class.

(thanks for super-quick reply btw!).

Mackeral_Fillet · Mar 13, 2014

Nope, you were right. It's nodeTitle, not nodeText! Thanks

TBDragon · Mar 22, 2014

thanks for the tut

but what if i want to hide some css in responsive ?!

for example

i make some change in extra.css
but i want these changes hidden when its responsive

and thanks

Paul B · Mar 22, 2014

There is no such thing as "in responsive".

Styles are either responsive or they aren't.

All you can do is manipulate the CSS based on the browser width.

geminiusa · Mar 27, 2014

Excellent resource, thank you so very much.

Paul B · Jun 4, 2014

A fixed layout by its very nature won't change size and therefore can't be responsive.

You can however have a maximum width responsive layout, which is what I use here with the XenVetana style.

Responsive Design

Member

XenForo moderator

Member

XenForo moderator

Member

XenForo moderator

Member

XenForo moderator

Member

XenForo moderator

Member

Member

Well-known member

XenForo moderator

Well-known member

Well-known member

Active member

XenForo moderator

Member

XenForo moderator

Similar threads

We value your privacy