Responsive Design

[BruceW]

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]

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]

@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]

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

 

[BruceW]

@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]

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

 

[BruceW]

@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]

This is taken directly from the resource content:

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

<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]

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

 

[Paul B]

EXTRA.css

 

[BruceW]

@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]

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

It works fine now.

 

[Mackeral_Fillet]

Hi.

Thanks for the guide.

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

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

Any ideas what I need to change?

 

[Paul B]

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

 

[Mackeral_Fillet]

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

(thanks for super-quick reply btw!).

 

[Mackeral_Fillet]

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

 

[TBDragon]

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]

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]

Excellent resource, thank you so very much.

 

[Paul B]

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.