XF 1.2 if statements using responsive design widths?

[Live Free]

Alright, I know you can use

 <xen:if is="@enableResponsive">

as part of an if statement. I'm looking to use specific page widths to hide certain coding sections of the site (breaks the site at certain page sizes). When the page is a certain width or below, I need certain divs displayed, and larger than that I need others.

Is there any way I can incorporate something like @maxResponsiveMediumWidth into an in statement?

For example:

<xen:if is="@enableResponsive AND @maxResponsiveMediumWidth">

or

<xen:if is="@maxResponsiveMediumWidth">
Medium/small switch.
<xf:else />
Content larger than medium response size - breaks design below medium width.
</xen:if>

I've been able to do this successfully with the header background image for responsive sizes using just css, but now Im trying to hide entire divs.

Is this possible, either ideally through a template edit or css?

 

[Jeremy]

@maxResponsiveMediumWidth (and all the other responsive style properties) is just a number; meant to be used in media queries. The template will have rendered before determining device width.

 

[Live Free]

I see. Thanks for the response. Any easy way come to mind that would allow me to hide or show content based on the page width?

<xen:if is="width < 500">

I know that's not the proper coding, but is there any page width variable that could be used?

I've tried CSS as well, but no luck, but maybe that's a better approach.

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

.ListBlockForum
{
display:none;
visiblity:hidden;
}

}
<xen:else />

.ResponsiveHide {
display:none;
}
</xen:if>

ListBlockForum and .ResponsiveHide are div sections near each other in code. In the above .ListBlockForum should be hidden with the @maxResponsiveMediumWidth size and display .ResponsiveHide normally, otherwise it should display .ListBlockForum normally and hide .ResponsiveHide.

I'm a little out of date with CSS. Is it not possible to hide divs in the manner, or am I simply using the wrong properties?

 

[Jeremy]

As stated, you won't know the width until after the template is rendered. Your CSS should look something like this:

@media (max-width: @maxResponsiveMediumWidth) {
  .listBlockForum {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: @maxResponsiveMediumWidth) {
  .ResponsiveHide {
    display: none;
  }
}

If you set your Medium Width to be 600px, if your window's width is greater than that, .listBlockForum won't even display. If you are under it, the .ResponsiveHide won't be rendered. You may want to read up on media queries:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

 

[Live Free]

Thank you very much - your post has been helpful. I've been working on this for the past hour or two and I've made some progress. I'm able to mostly get the CSS to act as it should, however I have two issue.

Current CSS:

@media all and (min-width: 850px) {
  .ResponsiveHide {
    display: none !important;
    visibility: hidden !important;
  }

}

@media all and (max-width: 850px) {
  .listBlockForum {
    display: none !important;
    visibility: hidden !important;
  }

}

This seems to be working mostly well. At less than 850px, the .ResponsiveHide div displays and the .listBlockForum does not; above 850px .listBlockForum displays - however, .ResponsiveHide doesn't display until it reaches the @maxResponsiveWideWidth. Once I reach this width, both .listBlockForum and .ResponsiveHide divs are displayed.

For some reason I can't determine, .ResponsiveHide isn't hidden - but should be according to the CSS. Why might this be?

I've been playing with this for the past few hours without any luck. To the best of my understanding, the first part of the CSS above, .ResponsiveHide having the min-width of 850px should hide the .ResponsiveHide div at any screensize over 850px. It only does to the maxResponsiveWideWidth (set at 1000px). I'm at a loss figuring out why.

Could it involve other CSS? The only other use of @media w/ widths is this snippet in EXTRA.CSS I added to hide the header background image (header background-image is set in style properties):

@media (max-width:@maxResponsiveWideWidth) {
  #header {
background: #176093;
background-image:none;
  }

I don't think this is relevant though.

My second question is this: is using @media for my purposes here only something I can do in the firefox browser? How can I get these same effects (hiding divs at certain screen widths) in all other major browsers?

Thank you very much.

 

[Live Free]

Oh wow I think I caught it. It was a missing bracket in the #header CSS. I added it and it seems to work - I just need to play around with the width settings.

I guess my only current question then is how can I apply this to browsers other than firefox?

 

[Paul B]

All major (newer) browsers should support media queries.

 

[Jeremy]

Your CSS will apply to all browsers that support responsive.

Also, If I read correctly, you have your max and min mixed up. Max-width will show for every screen size until 850. Min will display of 850 or above.