- This topic has 9 replies, 3 voices, and was last updated 1 year, 10 months ago by Ying.
-
AuthorPosts
-
April 29, 2022 at 12:34 pm #2204335Rohith
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/April 29, 2022 at 1:58 pm #2204377YingStaffCustomer SupportHi 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.April 29, 2022 at 3:36 pm #2204432Rohith1. 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?April 29, 2022 at 9:48 pm #2204517YingStaffCustomer Support1.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/ufyninP3mIf 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; }
April 29, 2022 at 9:57 pm #2204522Rohith1 & 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.April 30, 2022 at 3:21 am #2204645DavidStaffCustomer SupportHi there,
i do not see the Dispatch Grid on the site you linked to in the private info field.
Have you changed your mind ?May 4, 2022 at 5:49 am #2208819RohithPlease check only in the mobile view.
May 4, 2022 at 6:10 am #2208854DavidStaffCustomer SupportIf its only displayed on mobile, then you cannot add a Hover effect to them, as you can’t hover on a touch device.
May 4, 2022 at 11:13 am #2209425RohithWe can hover it. Whenever a user clicks on the grid, the Hover affect starts working. So we want to do that.
May 4, 2022 at 11:43 am #2209452YingStaffCustomer SupportYou 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); }
-
AuthorPosts
- You must be logged in to reply to this topic.