Responsive Questions

TeflonDon

Well-known member
Couple questions regarding responsive styles....first are there any good resources I should read on here before I bug people with basic questions? I haven't had experience with coding responsive styles before. :(


Logo: How can I specify an alternative logo for mobile browsing or atleast scale down my regular logo?

Hiding: Whats the best way to hide things that I don't want to be displayed for mobile users?


Thanks.
 
Couple questions regarding responsive styles....first are there any good resources I should read on here before I bug people with basic questions? I haven't had experience with coding responsive styles before. :(


Logo: How can I specify an alternative logo for mobile browsing or atleast scale down my regular logo?

Hiding: Whats the best way to hide things that I don't want to be displayed for mobile users?


Thanks.

I am also interested, otherwise I cannot move on.
I need the conditional statement, IF NOT mobile USE this code.

I saw the top viewport conditional statement but it is not working when I put a copy of it below the body tag
like this.

@Mike any help please.

HTML:
<xen:if is="@enableResponsive AND !{$noResponsive}">
this is responsive
<xen:else />
this is not
</xen:if>

I need this if statement, because ONLY then I can strip down my design code for mobile user.

Also for other user to use another logo etc or another banner image.
 
Glad I'm not the only one.

Anyways after some googling I found some info and now I use this code to hide things on mobile. I have it in my extra.css

Code:
@media (max-width: 800px) {
  #hidediv {
  display:none !important;
  }
}

I wrapped what I wanted to hide with
Code:
<div id="hidediv">
image i wanted hidden
</div>

Not sure if its proper coding but it works.
 
I see 2 ways to solve this problem:

  1. Play with the width of your logo.
  2. Replace logo image

For the first option you simply need to write this in your extra.css:

Code:
#logo img
{
  max-width: 100%;
  height: auto;
  width: auto;
}

We can also center our logo:

Code:
@media (max-width:@maxResponsiveNarrowWidth)
{
body #header .pageWidth .pageContent
{
  text-align: center;
}

#header #logo
{
  float: none;
  display: inline-block;
}
}

As for the second option it is harder but still possible.

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

body #logo span
{
  width: 200px;
  height: 40px;
  display: block;
  background-image: url(your-image.png);
}
}
 
Last edited:
I have a banner inside ad_below_top_breadcrumb

Code:
<xen:hook name="ad_below_top_breadcrumb" />
<xen:if is="{$contentTemplate} == 'forum_list'">
<div id=banner><img src="/some.pic.jpg"></div>
</xen:if>

How to make it responsive? I have tried this code:

Code:
#banner img
{
  max-width: 100%;
  height: auto;
  width: auto;
}

But it doesn't working.

Any help will be appreciated. :)
 
Last edited:
As for the second option it is harder but still possible.

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

body #logo span
{
  width: 200px;
  height: 40px;
  display: block;
  background-image: url(your-image.png);
}
}
That works excellent. Thanks a lot @CyberAP

Instead of display: none I used a smaller size for the logo e.g. width: 100px
That makes me quite happy :)

But would be great if this would be a core feature in order to allow larger logos to be shown in responsive mode too.
 
I have a banner inside ad_below_top_breadcrumb

Code:
<xen:hook name="ad_below_top_breadcrumb" />
<xen:if is="{$contentTemplate} == 'forum_list'">
<div id=banner><img src="/some.pic.jpg"></div>
</xen:if>

How to make it responsive? I have tried this code:

Code:
#banner img
{
  max-width: 100%;
  height: auto;
  width: auto;
}

But it doesn't working.

Any help will be appreciated. :)

Give me a link to a forum, I'll see what I can do.
 
I see 2 ways to solve this problem:

  1. Play with the width of your logo.
  2. Replace logo image

For the first option you simply need to write this in your extra.css:

Code:
#logo img
{
  max-width: 100%;
  height: auto;
  width: auto;
}

We can also center our logo:

Code:
@media (max-width:@maxResponsiveNarrowWidth)
{
body #header .pageWidth .pageContent
{
  text-align: center;
}

#header #logo
{
  float: none;
  display: inline-block;
}
}

As for the second option it is harder but still possible.

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

body #logo span
{
  width: 200px;
  height: 40px;
  display: block;
  background-image: url(your-image.png);
}
}

Thanks, the first option works pretty good. However, I have one case where it does not help me much in and was wondering if you would know a solution for that as well.

My logo is almost a square and its aligned to the left so even on the smallest screens, the width does not ever need to decrease. The issue with that is that on a small screen that square takes up at least half of the screen. Is there a way to somehow shrink it (height and length) proportionally to the width of the forum page?
 
Thanks, the first option works pretty good. However, I have one case where it does not help me much in and was wondering if you would know a solution for that as well.

My logo is almost a square and its aligned to the left so even on the smallest screens, the width does not ever need to decrease. The issue with that is that on a small screen that square takes up at least half of the screen. Is there a way to somehow shrink it (height and length) proportionally to the width of the forum page?

You mean to make it even smaller? Adjust the max-width property, like max-width: 85%; and include all the code in a media query.
 
I see 2 ways to solve this problem:

  1. Play with the width of your logo.
  2. Replace logo image

For the first option you simply need to write this in your extra.css:

Code:
#logo img
{
  max-width: 100%;
  height: auto;
  width: auto;
}

We can also center our logo:

Code:
@media (max-width:@maxResponsiveNarrowWidth)
{
body #header .pageWidth .pageContent
{
  text-align: center;
}

#header #logo
{
  float: none;
  display: inline-block;
}
}

As for the second option it is harder but still possible.

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

body #logo span
{
  width: 200px;
  height: 40px;
  display: block;
  background-image: url(your-image.png);
}
}
After adding this code to the extra css, my logo shows when i hold my phone horizontal ,but when turing the phone vertical, it does not show the logo. Any suggestions?
 
Top Bottom