Responsive Design

It's not a responsive design issue - it's basic styling/template issue, so it's off topic for this thread.

Brogan said:

It's not a responsive design issue - it's basic styling/template issue, so it's off topic for this thread.[/QUOTE

Click to expand...

I didn't think it was off topic sorry.. I know its a template issue, hence my question..


I was reading responsive design, whilst the style responds well to responsiveness, I am lookng for a advice of where to look in the style to pinpoint the issue..

Fixed.. I had a line of code in the extra.css that was causing the issue

width: @formWidth;

Is there a way to use a different style/theme whenever the forum goes into responsive mode?

There isn't a responsive mode as such.

There is a flag, which if set, changes the layout based on the width.
That is independent of the device and applies equally to desktop computers, tablets, mobile devices, etc.

You would need a custom solution to serve different styles based on device type.

I have a problem that is to do with Height, not width. I am using responsive however on my specific Galaxy Note Pro tablet, and as I have found out, on older android phones, that when you go to enter something in a text box the keyboard comes up and takes up vertical real estate of the screen. IPads and newer Android phones like my Galaxy S7 doesn't have this issue as the keyboard lays on top of the web page. So when the Keyboard comes up, which can take up half the height, to type something into the text box, the responsive goes into action and changes the menu etc to half the screen size and I lose the text box. This then sends the keyboard back down instantly and the responsive kicks in for a larger screen again.

Basically what I am saying is, on a Samsung Galaxy Note Pro tablet I lose half the height by the keyboard which throws the responsive settings into chaos. You can try it if you have a tablet by trying to use the Search function on my site at www.recreationalflying.com

That's an issue with the device and not something XF has any control over.

I know that Brogan but it is what I am trying to overcome and make XF i.e. my site, user friendly on more devices

Was testing some resizing for banner ads (not adsense, own banners) and found this works, no css change just add in the ad template "width=100%" like this:

<a target="_blank" href="place ad link here"><img src="location ad upload/ad.jpg" width="100%" /></a>

Just have to find a way for max size because it will enlarge on big screens with fluid style.

Apologies - I stuck my comment in the rating area. Not sure why you got so annoyed after a string of 5-star ratings.

The question would be:

Is the responsive system going to cover all Style Properties at any point? Right now it's a bit messy and inefficient to use Extra.css when you have a full styling system in place.

What would be the correct way for XF 2.2?

I want to use CSS which is applied for every view except for the mobile view.

Would this be the way?

I'm still using XF 1.5.x. Is there an add-on or some sort of mobile mod I can get? One of my users says my theme isn't really mobile friendly, but I can't change it since it's been modded too much. Thanks!!