Hiding an HTML/CSS Element on Mobile

Hiding an HTML/CSS Element on Mobile
Posted 2023-01-19 16:50:04 (edited) #940054 Hello! I want to preface this by saying I know only the bare minimum about HTML and even less about CSS, so there may be an obvious answer to my question. I am trying to create an element on my den page that, when clicked on, will make the user "jump back to the top" of the page. I've been able to get this working on my laptop quite well (as can be seen here in the bottom left corner of my den page). Unfortunately this effect does not work on mobile, as the pagedoll code I am using (from this post) causes the image to sit inline with the rest of the content rather than floating along the page. Is there a way to fix this? I would like to make the button either float over the page even while on mobile, or maybe pin it to the very bottom of the den page. As a last resort, hiding this particular element when on mobile would work as well. Please let me know if any of you have ways of fixing this! I would be so grateful for any help you can provide <3. Thanks! Edit: I've also noticed a blank white bar that appears on the bottom of the screen when I scroll down on mobile while viewing my den page. It seems to be the same size as the address bar and goes away when I scroll back up. Edit 2 (2/1/2023): I have since solved all of my HTML/CSS issues. I ended up hiding the "jump to the top" element on mobile and added some CSS that edits the height of the den page, which seems to have fixed all my issues. If anyone else ever finds this post and wants to know what specifically I did to solve my issues, just let me know! I'd be happy to share my process. :)	Raikiri #22768

Posted 2023-01-19 16:50:04 (edited)

#940054

Hello! I want to preface this by saying I know only the bare minimum about HTML and even less about CSS, so there may be an obvious answer to my question.

I am trying to create an element on my den page that, when clicked on, will make the user "jump back to the top" of the page. I've been able to get this working on my laptop quite well (as can be seen here in the bottom left corner of my den page).

Unfortunately this effect does not work on mobile, as the pagedoll code I am using (from this post) causes the image to sit inline with the rest of the content rather than floating along the page.

Is there a way to fix this? I would like to make the button either float over the page even while on mobile, or maybe pin it to the very bottom of the den page. As a last resort, hiding this particular element when on mobile would work as well.

Please let me know if any of you have ways of fixing this! I would be so grateful for any help you can provide <3. Thanks!

Edit: I've also noticed a blank white bar that appears on the bottom of the screen when I scroll down on mobile while viewing my den page. It seems to be the same size as the address bar and goes away when I scroll back up.

Edit 2 (2/1/2023): I have since solved all of my HTML/CSS issues. I ended up hiding the "jump to the top" element on mobile and added some CSS that edits the height of the den page, which seems to have fixed all my issues. If anyone else ever finds this post and wants to know what specifically I did to solve my issues, just let me know! I'd be happy to share my process. :)

Raikiri
#22768

Posted 2023-05-01 22:59:48

#1008709

Hello, I have a similar question. ^^
I also used that coder's page doll code, and I was curious how I could hide them on moblie?

MʏsteʀʏYan₪玄妙
#3609

Hiding an HTML/CSS Element on Mobile

Activity

Activity