[Support request] Layout for my Categories

[Nicolas]

I know you guys are busy.
Just making sure that my last reply has not slipped through your support system.
Thank you.

[David]

OK, so.

1. This Code Snippet you can keep as is:

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'categories',
    );
} );

2. This CSS:

body.blog article.dynamic-content-template > .gb-container,
body.archive article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2 !important;
    min-height: 300px;
}

Change it to:

@media(min-width: 768px) {
  body.blog article.dynamic-content-template > .gb-container,
  body.archive article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2 !important;
  }
}
body.blog article.dynamic-content-template > .gb-container,
body.archive article.dynamic-content-template > .gb-container {
    min-height: 300px;
}

This will fix the issue on Mobile.

HOWEVER your iPAD i cannot fix.
See this screenshot of yours:

https://snipboard.io/zEUofj.jpg

If it shows correctly on that page, then it should show correctly on every other page.
When you view the Tablet in Portrait view – how do the other pages look ?

[Nicolas]

Hello,

Implemented.

1 – It does not fix the issue on mobile. I tested on an iphone and on a friend’s samsung.
Same issue: the feature image are not shown 100% as they used to be shown at some point along this huge thread.

2 – Tablet in portrait: Not better. Same issue.

[David]

The most i can say is to:

1. Remove the CSS i provided here:

https://generatepress.com/forums/topic/layout-for-my-categories/page/4/#post-2513915

2. Add this CSS:

/* set template aspect-ratio */
body.blog article.dynamic-content-template > .gb-container,
body.archive article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2 !important;
}

/* for devices that DO NOT suppport aspect ratio */
/* add a min-height */
@supports not (aspect-ratio: 3/2) {
  body.blog article.dynamic-content-template > .gb-container,
  body.archive article.dynamic-content-template > .gb-container {
    min-height: 300px;
  }
}

What this will do is set the cards to an aspect-ratio of 3/2.
BUT if the device DOES NOT support aspect ratio then give them a min-height.
Now you can set the min-height and it should only apply to your ipad.

[Nicolas]

Hi David,

Currently, I have this in my CSS (all the code was provided by you or your team):

/* For the Archives/Category page*/
@media(min-width: 768px) {
  body.blog article.dynamic-content-template > .gb-container,
  body.archive article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2 !important;
  }
}
body.blog article.dynamic-content-template > .gb-container,
body.archive article.dynamic-content-template > .gb-container {
    min-height: 300px;
}

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'categories',
    );
} );

/*Realign the TITLE on  Feature images for the  Archives/Category pages (on smartphone)*/
@media (max-width: 768px) {
    .archive .generate-columns-container article > .gb-container > .gb-inside-container {
        padding-bottom: 0;
        aspect-ratio: 3/2;
    }
}

What should I remove or keep here?

Thank you

[David]

Remove all of it.
And replace it with:

/* set template aspect-ratio */
body.blog article.dynamic-content-template > .gb-container,
body.archive article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2 !important;
}

/* for devices that DO NOT suppport aspect ratio */
/* add a min-height */
@supports not (aspect-ratio: 3/2) {
  body.blog article.dynamic-content-template > .gb-container,
  body.archive article.dynamic-content-template > .gb-container {
    min-height: 300px;
  }
}
/*Realign the TITLE on  Feature images for the  Archives/Category pages (on smartphone)*/
@media (max-width: 768px) {
    .archive .generate-columns-container article > .gb-container > .gb-inside-container {
        padding-bottom: 0;
        aspect-ratio: 3/2;
    }
}

[Nicolas]

Done David.
But sorry, the display is still not back to normal on smartphones as described in my previous messages above.

[David]

I have checked this across all my mobile devices and simulators.
And they all look like this:

https://www.screencast.com/t/ivJg759ruIYI

Which is the same 3/2 aspect ratio that Fernando provided you earlier.

[Nicolas]

Hey David,

I was on the road going from one hotel to the other and their VPN was blocking a few things. Not sure.

I’m now back home.
Yes, it looks good on iPhone and Desktop.

Regarding the iPad, it is weird.
On the URL1, everything looks good except for the post “Massage ayurvédique Abhyanga : 5 livres & DVD pour se former”. The feature img does not display.
URL2: Only the Feature img of the post “Livre sushi, riz & matériel pour faire des…” displays, out of the 4 posts available on this page.
URL3: 0 feature images display. All wrong.
URL4: The 3 posts have their feature img displaying. All good.
Etc.

Please note that I also received this message from Google after I made the latest change:

[David]

I checked all those links across my different devices, and all of them display the images correctly.
And there are no errors in the browser developers console.
Try clearing any caches on the device, and if the issue persists then try connecting to a different network.

The message from Google, thats not related to the changes. ITs google not being able to complete the test. Retest those pages later today.

[Nicolas]

David, your message reassures me.
As long as it looks good on your side, it must certainly be good.

Thanks again.

[David]

You’re welcome

[Nicolas]

Hello David,

BIG issue here.
I have not touched my web site since our last exchange above.

5 minutes ago, I wanted to create anew blog post. I realized that all my Feature images are screwed / cut.
Also, a second issue is that my category page only display 1 post even if here should be several of them under the caterogy.
Can you please check my web site and tell me how to fix this asap?

See the screenshot and URL PI field too.

[Fernando]

Hi Nicolas,

The pages are returning a “Page not found” alert. Can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

It would be best to backup your site before doing so.

[Nicolas]

Hi,

I deactivate all non-GP plugins.
Have a look at my web site and try to select any category in my off-canvas menu: This is even worse. Not a single link does work.

For step 2 of https://docs.generatepress.com/article/debugging-tips/, sorry, but the link is dead and I went to the new page. I’m confused and don’t know what todo.

[Author]

Posts