Latest topics
» [GAME] What are you thinking right now?
by universecat Yesterday at 21:46

» [GAME] Animal Game
by universecat Yesterday at 21:43

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by universecat Yesterday at 21:40

» [GAME] Count to One Million!
by universecat Yesterday at 21:40

» [GAME] Last Letter Game
by universecat Yesterday at 21:39

» [GAME] Post a random picture
by SLGray Yesterday at 16:28

» Dark Mode + Another Question
by Ace 1 Yesterday at 13:31

» Hi everyone!
by skouliki Yesterday at 02:01

» Hai Guys~
by skouliki Yesterday at 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

» Chit Chat Thread
by Ange Tuteur Sat 14 Oct 2017, 11:20

» [GAME] World Snake
by SLGray Thu 12 Oct 2017, 16:12

» [GAME] Never have I ever..
by Valoish Thu 12 Oct 2017, 13:01

» Browsers & Updates
by SLGray Mon 09 Oct 2017, 12:11

Recent Tutorials
Who is online?
In total there are 11 users online :: 1 Registered, 0 Hidden and 10 Guests :: 2 Bots

jlmic

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Header Linklist Show in Mobile Only

View previous topic View next topic Go down

avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 571
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Sat 25 Feb 2017, 16:25

Hello there,

I have a special header enabled for my forum, please see this photo:


As you can see, I don't have the usual linklist bar going underneath this special header section, because it is not needed to display Mark all forums read, View unanswered posts, View your posts, etc. when I have the info in the Special Header section.

Here is the bar that is hidden currently:



However, my special header section up there is not shown on Mobile devices due to compatibility, because I cannot get my table data to float correctly and be inline on a mobile device. Therefore, I decided to hide that on mobile. However, this disables not only the special header section, but also the linklist bar.

I have tried a couple of methods to bring back the linklist bar for mobile devices only, but it is not doing it correctly. Can anyone tell me please what I'm doing incorrectly or if I've missed anything?

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9534
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 27 Feb 2017, 12:16

@Dr Jay I have a question :

Would you rather make the homepage profile responsive ( rearrange contents for smaller screens ) or do as you're suggesting ; only show the original linklist. I figured I'd ask this first, because it's completely possible to rearrange the contents of the homepage profile for mobile by using media queries.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 571
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Mon 27 Feb 2017, 12:55

I would love to try it out. I'm experimenting daily with mobile interface. Smile

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9534
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 03 Mar 2017, 13:06

I think the best solution would be to remove the floats on the avatar, stats, and link containers ; displaying each section on their own line. This way there will be a lot more space for each section and they wont seem as cramped on mobile. Think

I think you're using the homepage profile I made for FM way back, so I used theirs as an example for the snippet below. Go ahead and add it to your stylesheet.
Code:
@media (min-width:0px) and (max-width:768px) {

  #userProfile div[class$="Col"] {
    float:none;
    width:100%;
    margin-bottom:12px;
  }

  #userProfile div[class$="Col"] .title {
    width:100%;
  }

}

On any device below 768 pixels wide the homepage profile should look similar to this :
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 571
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Fri 03 Mar 2017, 13:45

Okay... I have used that version you posted long ago, but I modified it quite a bit to make it more unique, especially incorporating FA, FAE elements, etc.

I once attempted to make it hide-able; however, it did not work for various reasons... But we decided as admins not to have it be hidden due to its minimal interface and extreme usefulness for a variety of situations, especially for non-staff (especially incorporating the avatar clicking ability to edit it). Of course, nothing super brilliant... Just accessible.

I will attempt this as soon as possible. I will be out of the office today, so I will check later today and see how it appears. Smile

Thanks for your time!

P.S. - I'm helping several other administrators with the different FAE techniques... They love it! I am helping several others privately to ensure they too can accomplish their dreams. Thanks again! Very Happy

(If you are still adding affiliates, especially direct ones, I've had a partner icon up for FM Design for a few months now. I can provide a mini-icon, if you don't mind)

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9534
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 03 Mar 2017, 13:58

Ah, well if you changed any selectors, the snippet of CSS I provided might not work. If that's the case, just let me know the modified code if you need any help adapting it. Wink


Yes, the affiliates page is still active, let me know your button when you get the chance, so that I may add your forum. Thumb left
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 571
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Sat 04 Mar 2017, 04:17

Okay... This morning... tested... and it works well! => Solved and thanks.

Button for GeekPolice Affiliate:



Shamrock

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9534
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 06 Mar 2017, 11:07

Good to hear ! Thanks, I added your button to our affiliate page. Wink
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 571
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Mon 06 Mar 2017, 12:45

You're welcome. Bow 3

--------

~Dr Jay

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum