Search code examples
androidioscssmedia-queries

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


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


Solution

  • 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;
    }