user3646954 user3646954 - 3 years ago 98
CSS Question

Button (images) aren't appearing for firefox

So I have setup my website and put the images for the buttons in the correct place I believe I have used the right method to make it so across all browsers even mobile they appear properly. But for some reason now I am having an issue with people using firefox and on phones it is actually showing up the icons are a little too big and proportionate because the website was design for a widescreen.

Is there any way to fix this for firefox and mobile phones?

Source code: https://pastebin.com/xfsXHuTt

I believe it has something to do with this area, I am not sure.

I just can't seem to get them to fit properly.

@media (min-width:320px) {
#store{
content:url("http://website.com/store.png");
width:35vw;
height:35vw;
max-width:100%;
vertical-align:middle;
text-align:center;
display:inline-block;
}

Answer Source

Content is usually used for pseudo classes(before/after).

Why don't you use the background-image property throughout? It is needed that you specify the background-size as well. Because you have already specified the width & height, you can use 'contain' as background-size.

what background-size:contain does

Scale the image to the largest size such that both its width and its height can fit inside the content area

So the code you posted would become:

@media (min-width:320px)  {
    #store{
            background-image: url("http://viralpvp.net/store.png");
            background-size: contain;
            width:35vw;
            height:35vw;
            max-width:100%;
            vertical-align:middle;
            text-align:center;
            display:inline-block;
            }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download