Recent Tutorials
Who is online?
In total there are 6 users online :: 0 Registered, 0 Hidden and 6 Guests :: 1 Bot

None

[ 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 : 454
Reputation : 33
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 : 4581
Points : 9443
Reputation : 2303
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 : 454
Reputation : 33
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 : 4581
Points : 9443
Reputation : 2303
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 : 454
Reputation : 33
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 : 4581
Points : 9443
Reputation : 2303
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 : 454
Reputation : 33
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 : 4581
Points : 9443
Reputation : 2303
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 : 454
Reputation : 33
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