Hide on small screens

  • 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!

    https://www.ads-software.com/extend/plugins/wp-float/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author samhagin

    (@samhagin)

    Great, thanks for posting this.

    @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…

    https://www.luigizanni.com

    @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 ??

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

    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 https://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? ??

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

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

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

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

    Its working very well for me ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Hide on small screens’ is closed to new replies.

Tags