How to make tagdiv composer block news content be scrolling
To make the TagDiv Composer block news content scrolling, you'll need to add some custom CSS code to your WordPress website. Here's a step-by-step guide to help you achieve this:
Method 1: Using the overflow
property
- Log in to your WordPress dashboard and go to the TagDiv Composer block editor.
- Select the news block you want to make scrolling.
- In the block settings, click on the "Advanced" tab.
- In the "Custom CSS" field, add the following code:
.tagdiv-news-block { overflow-y: auto; }
This will add a vertical scrollbar to the news block.
Method 2: Using the scroll
property
- Log in to your WordPress dashboard and go to the TagDiv Composer block editor.
- Select the news block you want to make scrolling.
- In the block settings, click on the "Advanced" tab.
- In the "Custom CSS" field, add the following code:
.tagdiv-news-block { scroll-behavior: smooth; overflow-y: auto; }
This will make the news block scroll smoothly when you click on the news items.
Method 3: Using a CSS class
- Log in to your WordPress dashboard and go to the TagDiv Composer block editor.
- Select the news block you want to make scrolling.
- In the block settings, click on the "Advanced" tab.
- In the "Custom CSS" field, add the following code:
.tagdiv-news-block.scrolling { overflow-y: auto; }
Then, in the block settings, add a CSS class to the news block by clicking on the "Add CSS class" button and entering
scrolling
.
Additional tips
- To make the scrolling more smooth, you can add the following code to your custom CSS:
.tagdiv-news-block { scroll-behavior: smooth; }
- If you want to make the scrolling only work on desktop devices, you can add the following code to your custom CSS:
@media only screen and (min-width: 768px) { .tagdiv-news-block { overflow-y: auto; } }
- If you want to make the scrolling only work on mobile devices, you can add the following code to your custom CSS:
@media only screen and (max-width: 767px) { .tagdiv-news-block { overflow-y: auto; } }