• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Responsive Questions

TeflonDon

Well-known member
#1
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.
 

napy8gen

Active member
#3
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.
 

TeflonDon

Well-known member
#4
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.
 

CyberAP

Well-known member
#5
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:

Sheratan

Well-known member
#6
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:

Janmaat

Active member
#7
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.
 

CyberAP

Well-known member
#8
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.
 

Moddis

Active member
#12
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?
 

CyberAP

Well-known member
#13
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.
 

tommydamic68

Well-known member
#15
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?