Archived topic
Simple Scrolling Text
10 replies · Started by troyw on July 28, 2021
Hi guys,
I need to create a Text block with a fixed height and scrolling text in it. I'm sure this is just some simple CSS, but can't find it in your documentation?
I am using a grid with image on left and text on the right, but just need the text to be scrollable.
I also have an issue with the Social Icons below the image not appearing?
Thanks
Hi troyw,
Are you trying to do something like this?
https://share.getcloudapp.com/RBuLewLx
I see you've already prepped a class for it. We can use that.
Try this CSS:
.overflow-scroll {
height: 300px !important;
overflow: scroll;
}
Hey Elvin,
Yes, exactly what you put in your video.
I added your CSS and put 'overflow-scroll' in the Containers Additional CSS Class(es). Still not working?
I don't see the CSS provided being loaded on your site.
While I see the overflow-scroll class on the container block, I don't see the CSS being added to the site.
Can you add the CSS on Appearance > Customize > Additional CSS and check again? :D
Thank you guys for this idea and for the CSS code snippet. Here is my final result, based on Elvin's advice.
Hey Elvin,
Very strange. I was adding the CSS to my Child Theme Style sheet, but as we established, it didn't work. I have now put it in the Additional CSS and it works. Any ideas why is it not working from my Style Sheet?
Also, the Social Icons under the image are not appearing in the front end. Unsure why this is too?
@Marcel,
Nice one! glad it works for you. :D
@troyw,
can you try removing the CSS on the additional CSS now? After rechecking again, I see that it now loads as shown here - https://share.getcloudapp.com/KouJxg2d (strange that it didn't the first time I checked)
As for the social icons, the element is completely empty - https://share.getcloudapp.com/12uvpXZ2 - I'm not exactly sure why. Can you check if any icons are actually added to the Social Icons block?
No. If I remove the code from Additional CSS in Customizer it doesn't work. The code is on the Child Theme Style Sheet, but as you will see now, it is not working? If I put it back into Additional CSS in Customizer, it will work again. But why won't it work from the Child Theme Style Sheet?
As for the Social Icons, please see the screen shot I have added. This shows that they are below the image in the backend, but not showing up in the front end.
Strange things happening with this website build.
I see it working now - https://share.getcloudapp.com/E0uj55en
And as shown in the inspection, it's using the CSS from the stylesheet of the child theme.
Perhaps what you're seeing was a browser cached version of the page?
As for the Social Icons, please see the screen shot I have added. This shows that they are below the image in the backend, but not showing up in the front end.
Strange things happening with this website build.
Do the icons have actual links assigns to them? Icons won't show up even if you add them if they don't have links. You can test this by adding a link to 1 of them and leave the others empty. You'll see the icon you've added link on will appear on the front-end but not for the others w/o one.
Thanks Elvin
No problem. :D