Buttons overlapping in Mobile mode

[markoroots]

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:

[mykkal]

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

[ozzy47]

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

[markoroots]

Thanks for the replies guys.
Yes it is vb4.

[markoroots]

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??

[Dave]

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.

[markoroots]

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?

[TheLastSuperman]

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/docs/Web/CSS/Media_Queries/Using_media_queries
http://cssmediaqueries.com/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Still going huh? Check this question then the replies that followed:
http://stackoverflow.com/questions/4189868/what-does-media-screen-and-max-width-1024px-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.

[marengo]

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

#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