Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 05-29-2015, 07:22 AM
markoroots markoroots is offline
 
Join Date: May 2013
Location: Italy
Posts: 275
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default 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??
Reply With Quote
  #2  
Old 05-29-2015, 07:50 PM
mykkal's Avatar
mykkal mykkal is offline
 
Join Date: May 2007
Location: Atlanta, GA
Posts: 485
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Have you tried using the default mobile style? Wait... what version of vb are you using that looks like vb5.
Reply With Quote
  #3  
Old 05-29-2015, 09:51 PM
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Jul 2009
Location: USA
Posts: 10,929
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It's not vB5, it's vB4.2.2
Reply With Quote
  #4  
Old 06-29-2015, 07:53 AM
markoroots markoroots is offline
 
Join Date: May 2013
Location: Italy
Posts: 275
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks for the replies guys.
Yes it is vb4.
Reply With Quote
  #5  
Old 09-15-2015, 07:43 AM
markoroots markoroots is offline
 
Join Date: May 2013
Location: Italy
Posts: 275
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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??
Reply With Quote
  #6  
Old 09-15-2015, 08:17 AM
Dave Dave is offline
 
Join Date: May 2010
Posts: 2,583
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
Благодарность от:
RichieBoy67
  #7  
Old 09-30-2015, 01:13 PM
markoroots markoroots is offline
 
Join Date: May 2013
Location: Italy
Posts: 275
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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?
Reply With Quote
  #8  
Old 10-05-2015, 08:53 PM
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
Senior Member
 
Join Date: Sep 2008
Location: North Carolina
Posts: 5,844
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

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.
Reply With Quote
  #9  
Old 10-06-2015, 07:12 AM
marengo marengo is offline
 
Join Date: Dec 2009
Posts: 15
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
Благодарность от:
TheLastSuperman
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:21 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05258 seconds
  • Memory Usage 2,247KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (9)post_thanks_box
  • (2)post_thanks_box_bit
  • (9)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit
  • (9)post_thanks_postbit_info
  • (9)postbit
  • (9)postbit_onlinestatus
  • (9)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete