Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Forsaken]

Well that sucks, and the only alternative i have is to allow my members to use Tapatalk? -__-

You can limit tapatalk for certain groups (Which is what I'm doing once I launch my site).

 

[MattW]

I had never attempted it, and just tried with my Samsung S3. It adds it, for some reason on mine, it rotated it. Might be the way I took the photo though.

On the Android OS, it gave me the option for grabbing the image like any other time, files, gallery, etc... select to add as a thumb or full image.

I've done some test uploads using the iPhone, and it's rotating the images like you said above. It works OK though, apart from the image being rotated

 

[Sheldon]

I've done some test uploads using the iPhone, and it's rotating the images like you said above. It works OK though, apart from the image being rotated

Do you take your photos with your phone up? Or on its side?

The ones I did, I know my phone was up (like in talking position). Curious if taking one on its side will change it.

 

[MattW]

Do you take your photos with your phone up? Or on its side?

The ones I did, I know my phone was up (like in talking position). Curious if taking one on its side will change it.

The first one was taken portrait (talking position) and was rotated. I've just taken a picture landscape, and it didn't rotate it.

 

[Sheldon]

The first one was taken portrait (talking position) and was rotated. I've just taken a picture landscape, and it didn't rotate it.

Thanks for the info...

 

[Arty]

Attachments issue: add this to responsive_extra.css

.xenOverlay.attachmentUploader { width: 290px !important; }

Uploads on iPhone: Safari in latest iOS has ability to upload attachments. You just need to ask your users to update their software. Alternatively users with outdated iOS devices can upload files to third party image hosting services that have apps and then post links to those images.

 

[Parsnip]

I can add it as option for next version, so if you really need to you could quickly enable notices.

Was support for notices on mobile devices ever added? My forum is closed to guests, but I display a welcome notice to them and I just realised that it's not showing up on small screens.

 

[Arty]

You can show notices by adding this to responsive_extra.css

#Notices { display: block !important; }

 

[Parsnip]

Brilliant, thanks for the quick reply!

 

[Dante_B]

How can I fix my alignment problems?

 

[Sheldon]

Size of you logo it looks like.... on phone hard to confirm...

 

[Sheldon]

Also increase size of your moderator bar....

 

[Dante_B]

And is this being adjusted in the responsive templates or my default template?

 

[Sheldon]

And is this being adjusted in the responsive templates or my default template?

This is what i had in extra css for the moderator bar for one...

/*Mobile CSS*/
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
#moderatorBar, #moderatorBar div {
    padding-bottom: 30px !important;
}
}

 

[Arty]

Header bar has fixed height and background image that is designed only for that fixed height. You'll have to ether completely remove it or live with notice in header that is very hard to see. Add this to responsive_extra.css

#header_bar .itemLabel { padding-top: 5px; }

Navigation menu should be moved above. It can be done by reducing height of logo block, its too high for such small logo. In style properties -> responsive design: header, set logo height to something like 90px

To fix breadcrumbs add this to responsive_extra.css

.breadBoxTop, .breadBoxBottom { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

In navigation menu current item looks weird. Add this to responsive_extra.css to fix it

.navTab.selected div.navLink a.navDivLink { color: #56575A !important; text-shadow: none; height: auto; background-image: none; }

 

[oman]

Hi Arty,

I noticed that when I went to my profile page, or any profile page, there are 2 navigation menu buttons.



I know the top one is definitely meant to be the navigation menu, but shouldn't the other one be called Sidebar seeing as it reveals the profile page sidebar?

 

[Arty]

That's a good point. When I first was designing this, it was meant to be for style, so addition of new language variables wasn't possible. However, in add-on version it is possible. I'll add new language variables in next version.

 

[Arty]

Actually, it is correct. There shouldn't be second navigation button on that page. What items do you have in second navigation menu?

 

[Dante_B]

Header bar has fixed height and background image that is designed only for that fixed height. You'll have to ether completely remove it or live with notice in header that is very hard to see. Add this to responsive_extra.css

#header_bar .itemLabel { padding-top: 5px; }

Navigation menu should be moved above. It can be done by reducing height of logo block, its too high for such small logo. In style properties -> responsive design: header, set logo height to something like 90px

To fix breadcrumbs add this to responsive_extra.css

.breadBoxTop, .breadBoxBottom { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

In navigation menu current item looks weird. Add this to responsive_extra.css to fix it

.navTab.selected div.navLink a.navDivLink { color: #56575A !important; text-shadow: none; height: auto; background-image: none; }

Thank you for the response. But I'm still having problems. When adding these codes, i just copy/paste line by line into responsive_extra.css correct?
I added each one but i see no change to my issues.

 

[Arty]

Everything looks fine for me, except for navigation button location. Change logo block height as I wrote above.

If you don't see changes, probably your browser has cached old CSS. Try refreshing page or restarting phone.