Hide on small screens

sconchiti
(@sconchiti)

11 years, 4 months ago
Hello-

I was looking for a way to hide the floats on small screens (like cell phones) and found that adding the following to my css worked:
```
@media screen and (max-width: 1345px) {
    .dc-floater-content {
        display: none !important;
    }
}
```
Of course, change 1345 to whatever width works for you. This will not work in IE8, but not many people have that on small screen devices, I hope.

Hope this helps others out there!

http://wordpress.org/extend/plugins/wp-float/

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author samhagin
(@samhagin)

11 years, 4 months ago

Great, thanks for posting this.

luigizanni
(@luigizanni)

11 years, 3 months ago

@sconchiti, @samhagin
I tried your code, but i have a problem.
This doesn’t work for mobile but for the pc version.

Probably I’m not able 🙂 Can you give me more infos?

I tried to put this code in the css without results 🙁

On the pc version it works great, on the iPhone version it occupies 30% of the screen…

http://www.luigizanni.com

laurendevine
(@laurendevine)

11 years, 2 months ago

@luigizanni

You need to edit the max-width value. I initially added this to my CSS but didn’t change the value of 1345px…so on my PC, I couldn’t see the floating buttons anymore…but when I changed the value to 1000px (which is the width of my website)…they reappeared!

So, try changing that value to equal the width of your site page and I bet it will work for you 🙂

peopleinside
(@peopleinside)

11 years ago

I’m not able (good) to edit this kind of file.
Thanks anyway for the information.

peopleinside
(@peopleinside)

11 years ago

I have solved with a button on the right screen of my website but i want alert the autor of WP-Float if you see http://www.peopleinside.it (my blog) the live chat button on the center left of the screen are in the time who page is loanding in top of the page (is very ugly to see, after the load of the page the cutton go in his position, can be improve this in the plug in WP-Float without the Button float for be fixed in the center of the screen?

I don’t know if you understand what i mean.
If you load the site you see with 7 MB internet connection the button before in the top left in a blanck space and after the button move in center of the screen and the blank space desaper.. can be improved and removed this effect? 🙂

mountaincrawlie
(@mountaincrawlie)

10 years, 10 months ago

If you want it to work on Android phones, add the following as well:

@media only screen and (-webkit-device-pixel-ratio:.75){
.dc-floater-content {
display: none !important;
}}

@media only screen and (-webkit-device-pixel-ratio:1){
.dc-floater-content {
display: none !important;
}}

@media only screen and (-webkit-device-pixel-ratio:1.5){
.dc-floater-content {
display: none !important;
}}

boderhamster
(@boderhamster)

10 years, 8 months ago

Can you guys tell me where to put the code so this would work?
Thanks in advance.

jigsme
(@jigsme)

10 years, 8 months ago

Hi guys, I am a user of sam’s plugin too, and I am using this another plugin for for sort different viewers:

http://codecanyon.net/item/mobile-content-mobile-detection-wordpress-plugin/4169385

Its working very well for me 😉