vb.org Archive - Buttons overlapping in Mobile mode

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - Buttons overlapping in Mobile mode (https://vborg.vbsupport.ru/showthread.php?t=318857)

Buttons overlapping in Mobile mode

Hi everybody.
I have a problem and I hope that some one can help me.
On my forum www.sigarettaelettronicaforum.com if I visualize the site with the mobile, the top buttons are all overlapping.

What can I do?? :confused:

Have you tried using the default mobile style? Wait... what version of vb are you using that looks like vb5.

It's not vB5, it's vB4.2.2

Thanks for the replies guys.
Yes it is vb4.

I don't know what is success but now the buttons are not overlapping but the visualization of the forum in mobile mode, is too much large and small...
Can someone help me??

They overlap because there's simply not enough room for them to fit on 1 line on a smaller screen resolution. You can either make the buttons smaller or make a CSS rule for mobile devices only that will make the buttons smaller.

Hi guys and thanks for your tips.
The problem is that I have a fluid template so I tought that in mobile mode the style show the buttons in the right way... but isn't like this.
Please guys is there someone can tell me how can I change the CSS rule or make the buttons more small for mobile devices, like Dave says?

They will only show if the area to show them in has enough room per say. Basically what Dave said :p.

https://developer.mozilla.org/en-US/..._media_queries
http://cssmediaqueries.com/
https://css-tricks.com/snippets/css/...ndard-devices/

Still going huh? Check this question then the replies that followed:
http://stackoverflow.com/questions/4...px-mean-in-css

Make sure you know what you're "looking for" otherwise these may not be the droids you're looking for... ;) *Translation* make sure you're fixing the style correctly and not adjusting to best fit how you want to view the site... using @media definitions will change how the site looks based on screen size of the device. What you want to avoid is designing the site around YOU and you alone - if its a desktop/pc style then so be it you want what you want but when it comes to mobile/responsive for example, if you style the site to make it look perfect on your ipad mini it might not look perfect on a larger ipad 2 or other tablet. Code for all devices don't conform to one.

the easiest way if you'll create two navigation: one for desktop, second for the mobiles.
Find your <div id="navbar"class="navbar">
duplicate it and for the second write <div id="navbarhide"class="navbar">
Now you have two navbars.
Well, customize a menu and CSS style for navbarhide (add new css code in addtional.css).

Then open additional.css and write

Code:

#navbarhide { display: none;}



@media screen and (max-width: 990px) and (min-width: 120px){

#navbarhide {display: block;}

#navbar {display: none;}

}

Look at the demo, here I created two navbars: https://www.theironden.com/forum/

More complicated solution use http://responsivemobilemenu.com/en/ but in this case you have to redo navbar css code. Not so fast but looks good :)

Regards,
Nathalie

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01034 seconds Memory Usage 1,726KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: