How can I make my button display correctly on all media devices?

Question

I have a website that has a different theme from its mobile site.

They share the same content and plugin , but different themes.

I have 3 buttons that are on my mobile site that shows clear only on certain phones.

when I pull up the site on a different phone, sometimes the buttons look smashed together and almost like the dont have css linked to them

why does this happen on certain phones , idk.....

the buttons say "search jobs" "employers" "candidates"

what could this be, please help

https://hughesjobs.net

Answer 1

Different Phones have different operating systems and (very likely) different web-browsers. Each browser hast its very unique default-css-files embedded. If you do not specify your css entirely, then a browser will "fall back" to its own unique default-css-file (at least regarding the undefined css properties).

This happens a lot with Iphones, Ipads, etc.

Mobile devices have (again) their own css-properties.

Your question is regarding the consistent design of buttons. The answer is: debug on different devices AND be 100% specific about all css properties.

BR

update:

according to your code, this detailed css-styling should make your buttons look the same in different browsers:

.containerm button {
    padding: 5px;
    margin: 5px;
    width: 100px;
    height: 36px;
    background-color: #BBB;
    color: white;
    font-size: 14px;
}