Archived topic
Dispatch Grids font size
9 replies · Started by Rohith on April 29, 2022
1. I have hidden the Dispatch grids in desktop and only two of them are shown in Mobile. Now, I want to reduce the dispatch grid's title font size and move the title little bit down.
2. Also, I would like to change the grid animation. Whenever a user clicks on the grid, it is zooming in. I want the grid click animation in this way.
https://www.sammobile.com/
Hi Rohith,
1. Try this CSS:
#wpsp-961 h2.wp-show-posts-entry-title {
font-size:20px;
margin-top: 20px;
}
2.
Whenever a user clicks on the grid, it is zooming in.
I'm not seeing this animation, is there any specific place I should be clicking on?
But anyway animation upon click requires custom JS which is out of the scope of the support forum.
We can help with hover effect with custom CSS though.
1. It worked but I need Vignette at the bottom of the two grids.
2. Yes, I need Hover Affect. Please provide the CSS.
3. There's a small White/ Black line between the two grids. How to remove that?
1.If you are referring to the Dispatch style, then you already have it, it's just not very visible with your images:
https://www.screencast.com/t/ufyninP3m
If this is not what you mean, can you provide an example site where I can see the style?
2. Your current show post list is having this hover effect. Hover effect on mobile will show before the page jumps to another link, if your internet is fast enough, you might not be able to see the effect.
3. It's from this CSS you added:
body:not(.single) .post {
border-bottom: 1px solid #000;
}
and this CSS:
.post {
border-bottom: 1px solid #000;
}
You can change it to:
body:not(.single) .post:not(.wp-show-posts-single) {
border-bottom: 1px solid #000;
}
and
post:not(.wp-show-posts-single) {
border-bottom: 1px solid #000;
}
1 & 2. Please open this website and move the mouse curser on the grids. You can see the effect. I want to achieve it
3. I have changed but the line is same.
Hi there,
i do not see the Dispatch Grid on the site you linked to in the private info field.
Have you changed your mind ?
Please check only in the mobile view.
If its only displayed on mobile, then you cannot add a Hover effect to them, as you can't hover on a touch device.
We can hover it. Whenever a user clicks on the grid, the Hover affect starts working. So we want to do that.
You can try the below CSS, but it won't work on mobile unless your users are using very slow internet:
#wpsp-961 .wp-show-posts-image.wpsp-image-center:hover img {
transform: scale(1.5);
}