Hello – I am using the Element Visibility options on my site and noticing it is not completely working. for example, I have set an image to only show on mobile devices but when I look at it from my desktop device, the image is hidden yet in its place is a big empty space. so it hides the image yet leaves space that I cannot get rid of.
link to my page is here: https://smilingtoad.com/new/our-story/ near the middle of the page, you will see two full width images, below those you will see the empty space I am referring to. specifically between the full width photo and text box.
I would send you screenshots of the exact locations but I am not seeing this option in your forum.
Hey scientistsofmedia,
I took a look at your page and see the areas you are referring to, the space seems to be created by the containers for the images you are hiding, if there is a container please set it’s visibility to the same as the image.
If I’m incorrect, then you can use this css to hide those areas:
@media only screen and (min-width: 768px) {
#top.page-id-69 #after_section_3,#top.page-id-69 #after_section_5 {
display: none !important;
}
}
Please note that the css is using the auto generated IDs for those areas and they will change if you make changes to the structure of the page. A better solution is to add custom IDs to the elements and update the css. If you would like a hand with this then please include admin login in the Private Content area.
Best regards,
Mike
no container involved. I used the css though and it worked. thanks!
Hi,
Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?
Best regards,
Mike
yes -thank you!!
Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.
For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)
Best regards,
Mike