CSS display:none property being applied

[imaginex1a]

Hi,

I am trying to set up a tap to call button on my website for mobile devices.

On my page https://www.bankruptcycanada.com/aboutus.htm I have added the div taptocall (<div class="taptocall"><a href=tel:18778794770> <img src=/images/taptocall.png></a></div>) to hold the button image. taptocall has a style in desktop.css of display:none and the tap button does not appear on large screens. However, there is no display:none style added in the style sheet for iphone.css (https://www.bankruptcycanada.com/css/iphone.css) and phone.css (https://www.bankruptcycanada.com/css/phone.css) but the tap button image does not appear and still seems to have the display:none style applied from desktop.css (https://www.bankruptcycanada.com/css/desktop.css)

Could someone help me figure out why the taptocall div is hidden on phone devices.

Thanks in advance ))

[ronpat]

Allow a question, please.

What is it about desktop.css that woud prevent it from being read by and applied to other devices?

/* Desktop */
@import url("desktop.css");
/* Phone */
@import url("phone.css") only screen and (min-width:321px) and (max-width:480px);
/* Phone */
@import url("iphone.css") only screen and (min-width:0px) and (max-width:320px);
/* Tablet */
@import url("tablet.css") only screen and (min-width:481px) and (max-width:768px);

[imaginex1a]

Hi, well there should be nothing about desktop.css that applies to the other devices. But the div and image within the div are hidden. I must have mis coded something but I’m not having luck figuring it out. Thanks))

[ronpat]

desktop.css is read and applied to devices of all widths.

desktop.css

.taptocall {display: none;}

is not overriden in the other .css files.

I have not tested this, but try changing

@import url("desktop.css");

to

@import url("desktop.css") only screen and (min-width:769px);

and see what happens.

…It is probable that other things will “break” but just see what happens to the button.
 

A more practical logic for laying out a page is to focus on a fluid layout and apply CSS breakpoints where needed by the design rather than try to target specific devices.

eg.

onefile.css

css styles for all widths first

@media screen and (max-width:800px) {
    css styles for smaller widths
}
@media screen and (max-width:500px) {
    css styles for smallest widths
}

The breakpoints are determined by the layout, not by a particular device.

This is a “desktop first” arrangement. One can also use a “mobile first” arrangement. Coder’s choice.

At this time, your web page could use some fluid TLC to eliminate the persistent horizontal scrollbars.

[imaginex1a]

Thanks