Hiding floating div on mobile

Ive spent at least 3 hours trying to figure this out fully and I finally got it!!! Using this code (without the brackets) you can have a floating div 🔽

<div style="float: ;

max-height: 500px;

position: fixed;

right:[1, might depend on image size]px;

top: [depends on image sixe]px;

z-index: 600;"><img src="[image link]" width="[img w]" height="[img h]" loading="lazy">

</div>

Which is great and all but mobile users are out there!! It might cover their view. Using this next code you can make it desktop only!!🔽

<body>

.mobileHide { display: inline;}

/* Smartphone Portrait and Landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){ .mobileHide { display: none;}}

</style>

[div you want hidden here]

</body>

🔽Together they look like this!!🔽

<body>

.mobileHide { display: inline;}

/* Smartphone Portrait and Landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){ .mobileHide { display: none;}}

</style>

<div style="float: ;

max-height: 500px;

position: fixed;

right:[1, might depend on image size]px;

top: [depends on image sixe]px;

z-index: 600;"><img src="[image link]" width="[img w]" height="[img h]" loading="lazy">

</div>

</body>

My profile includes both of these codes so you can look at it for a visual if ya want!!

13 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

LilSisPlanet

1731882680

actual lifesaving code

Report Comment