Post Grid Element buggy layout

[Cafonauta]

I changed the grid from 6×1 to 4×2 and the grid is completely messed up on Chrome.

With Firefox and Safari (on mac) everything is ok.

Site is currently in maintenance mode so you need admin credential given below

See attachments

 

Attachments:

You must be logged in to view attached files.

[Cafonauta]

This reply has been set as private.

[Cafonauta]

This reply has been set as private.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Add this to wp-admin -> theme options -> general settings -> quick css

COPY CODE

.responsive-cols.per-row-4>* {width:24% !important;}

Let me know
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Cafonauta]

Hummm it works but the layout it’s not fluid anymore. Now if I resize the window it has alway four column even if the space it’s not enough.

[Radu]

Hi,

Try with this instead

COPY CODE

@media(min-width:992px;){
.responsive-cols.per-row-4>* {width:24% !important;}
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Cafonauta]

Hi Radu,

No. It doesn’t work. It behaves as the video.

Moreover with both your solutions I see another strange behaviour of the grid: Post elements in the second row change order based on the window size.
Why posts change order if I set the “order by date” in grid settings?

[Radu]

Hi,

You will have to use only the code with media in it not both,

The posts order will change because the posts are pulled in the date order

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Cafonauta]

Radu of course I’m using just one solution at the time.
I’m using only:

COPY CODE

@media(min-width:992px;){
.responsive-cols.per-row-4>* {width:24% !important;}
}

It doesn’t work.

Regarding the order i don’t understand you. Posts are sorted by date so wahy one post should change order respect to the others based on window size?

Thanks

[Radu]

The masonry grid uses isotope and this behaviour it’s to change order to some elements dynamically that depend on by the element height, this is now masonry and isotope works

For the grid behaviour please check now,I’ve deleted the previous codes from style.css and i’ve added this rule in quick css area .responsive-cols.per-row-4>* {width: 24.9%;} leave it there.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[Cafonauta]

It works (TM)

Thanks

[Radu]

Great

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts