[Support request] I want the grids exactly in this way

[Rohith]

Hey, I am talking about these Magazine Grids! Are you talking about these only?

[Tom]

Hi there,

I’m not sure I understand. Are you wanting to change the layout you were helped with in this topic to a “magazine grid” style? Isn’t that exactly what “Dispatch” provides by default?

Please note that while we’re happy to help point you in the right direction, we’re not able to help with total custom development. This topic has definitely entered the “custom development” category of things. You can learn more about what our support includes here: https://generatepress.com/what-support-includes/

[Rohith]

No actually, from the beginning I was trying to achieve this Magazine Grid Layout!
https://ibb.co/yWDn9Qc
It’s almost one and half day and I am roaming around the forum for replies. Please help me in achieving this as soon as possible

[Tom]

Is that not the layout that Dispatch imports by default?: https://gpsites.co/dispatch/

It seems this topic showed you how to create their new layout: https://www.androidauthority.com/

The layout in your screenshot comes with the Dispatch site – you shouldn’t need to tweak/create something new if you’ve imported that site.

[Rohith]

Oops, your team has completely misundertood this. I have provided the Web Archive URL of that website in the beginning it self. But your team has visited the present website. However, I have added the link privately.
I want to acheive the Magazine Grids exactly as in this website. Please guide me to do this!

[Tom]

Ah, sorry about that!

This is something that Dispatch imports by default.

However, if you’ve removed what Dispatch imported, you can rebuild it using these instructions: https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439597

[Rohith]

But I don’t want it like the Dispatch grid. I want the only 4 grids (please check screenshot in private info)

[Tom]

Hmm, not sure what I’m missing here.

Here’s the Dispatch grid: https://www.screencast.com/t/0plItpGAz

It has 4 posts, a large post on the left, then 3 posts on the right with the top one being full width.

Here’s the one you want: https://www.screencast.com/t/AmLvHDqm6m4

It using the exact same layout – 4 posts, large on the left and 3 on the right with the top one being full width.

[Rohith]

I want these changes
1. Change grid hover to same as Android Authority website (In dispatch, the images are zooming, i don’t want in that way)
2. White title and there should be some black transition on the background of the title
3. I want all the grids in mobile to be of same size.
4. Next, the grids in mobile should not come one by one, They should be display side by side. So that user can scroll the grids!
I hope you will get the clear cut now.
And I kindly request you to help me for this ASAP because one day was already gone due to misunderstanding from your team members.
Thanks

[Tom]

I’m afraid a lot of what you’re wanting there is custom development – it’s not super easy stuff we can help with in the forum here.

If you set up the grid to look like Dispatch, we can help point you in the right direction with things like removing the image zooming and colors.

However, things like scrolling the grids on mobile is not that simple and will require custom development.

[Rohith]

Okay, let me change those.
1. Remove image zooming in the grid and create some other hover effect if possible
2. White title and there should be some black transition on the background of the title
3. I want all the grids in mobile to be of same size.
I guess, we will be able to these things now!
Thanks

[Tom]

We should be able to help with those items quite easily once you implement the Dispatch layout on your site and link us to it.

Thanks!

[Rohith]

Thanks, looking forward for your replies

[Rohith]

Implemented the Dispatach layout

[Tom]

1. To remove the zoom, go to “Customize > Additional CSS” and remove this:

.wpsp-card article:hover .wp-show-posts-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

2. This should do it:

.page-hero.wpsp-grid .wp-show-posts-entry-header {
    background: rgba(0,0,0,0.5);
}

3. Try this:

@media (max-width: 768px) {
    .page-hero.wpsp-grid .wp-show-posts {
        display: block;
    }
    .wpsp-grid article:first-child .wp-show-posts-image a img {
        height: auto;
    }
}

[Author]

Posts