Responsive Questions

T

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.
 
Sort by date Sort by votes
TeflonDon said:
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.
Click to expand...

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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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:
Upvote 0 Downvote
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:
Upvote 0 Downvote
CyberAP said:
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);
}
}
Click to expand...
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.
 
Upvote 0 Downvote
Sheratan said:
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. :)
Click to expand...

Give me a link to a forum, I'll see what I can do.
 
Upvote 0 Downvote
CyberAP said:
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);
}
}
Click to expand...

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?
 
Upvote 0 Downvote
Moddis said:
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?
Click to expand...

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.
 
Upvote 0 Downvote
CyberAP said:
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);
}
}
Click to expand...
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?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

B
  • Question Question
XF 2.2 Import from SMF2.1 - Attachments issues/questions
Replies
0
Views
37
bluegreyshoes
B
oO5 Dynasty
  • Question Question
XF 2.2 Hey, I need help keeping contents of CSS Flexbox Responsive Layout inside the Notices box boundaries on mobile
Replies
0
Views
541
oO5 Dynasty
oO5 Dynasty
M
  • Question Question
Pre sale questions
Replies
12
Views
2K
matrixsc
M
Dixie McCall
  • Solved
XF 2.2 Menu open style prop questions
Replies
4
Views
667
Dixie McCall
Dixie McCall
michalcabala
  • Question Question
Few questions before buy
Replies
5
Views
1K
MollySpens
M
Back
Top Bottom