[Support request] Layout for my Categories

[Nicolas]

1. Go to the web site on your smartphone and type in a word in the search box. See the blue border around it?

2. Thanks for the screenshot but I was not talking about the search box. I’m talking about the feature images that are cut. Less than 1 third of them are visible on ALL category pages. Please see the screenshot for the URL shared in the PI field.

3. Ipad Air Model A1474.
No, I don’t know anyone else having an ipad.

[Fernando]

1. I’m not seeing a Blue border when I type. I also tested it on my personal phone. The blue border you’re seeing might be specific to your device. Some devices or browsers add their own CSS to some elements.

2. That’s weird. The code you have should work for all devices. Perhaps there’s a conflicting code internal with that specific iPad Air. I tried viewing your site on an iPad Air 5, and the issue didn’t exist there.

Can you try replacing this code you have:

body:is(.archive,.blog) article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2;
}

with this:

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

[Nicolas]

1. Check this. My iPhone XR is a regular one like there a millions of them and I’m using the native Safari browser.

2.I have implemented this, cleared the cache of the brower and reboot the ipad. No better. No change.
The ipad is on iOS 12.5.6 and it says the sotware is up to date.
I think I spotted a bug from GP here, being not compatible with this version of the iPad Air and/or the iOS version it can support.

[David]

Change this CSS:

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

to:

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

[Nicolas]

Done.

2. No improvement but the layout has changed a bit. Look at my Cuisine Category page.

1. What about 1. too? Is there a way to get rid of this blue color and replace it with my main theme color, orange?

[David]

Lets deal with one issue at the time.

Increase the min-height: 300px; to a much larger number.
Does it change the height on screen ?

[Nicolas]

David, I have not implemented the min-height: 300px; yet.
Can you please specify exactly where I should do this?

But with respect to your message from #2495115, after implementing what you suggested, I just discovered it “destroyed” the layout on my smartphone:
Look here to see how:
1. the feature image cannot be seen fully anymore.
2. the title is cut, not visible.
3. the logo is cut.

I’ll be on the road in the coming days. Please expect possible delay in my replies.

Thank you.

[David]

See my reply here:

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

Adding the min-height: 300px; is purely a test, to see if that works on your iPad.
If it does work then we know your iPads browser version does not support aspect-ratio

[Nicolas]

Hello,

Sorry, but I have been quite confused since #2493282.
I have followed every and each of your instructions and provided you with the related feedback, or I missed something.
If so, please apologize and tell me where I failed.

I just checked and it seems like the min-height was already implemented and gives no improvement.
Look at my CSS.

What to do from there with open issues I reported with respect to:
– the layout issue on the ipad. How to get a decent layout then of Safari does not support aspect-ratio?
– the new layout issue on smartphones
– the blue color of the search box

Thank you for your support.

[David]

If you increase the min-height value to say 500px ? Do you see a change on your desktop ?

[Nicolas]

Yes, it breaks the layout. Look here + check directly on my site.

[David]

And do you see that change on your iPad ?

[Nicolas]

No improvement on the iPad: Look at the result after I cleared the cache, update to the latest iOS 12.5.7 and rebooted.

Can you please share clear and precise instructions (as always) to tell me:
1 – how to go back to the correct version on desktop and smartphones
2 – how to fix the ipad issue? Is there a solution to this?

Can you please also shared a screenshot of what you see on YOUR ipad for the same URL?

Thank you

[David]

hmmm..

try changing the css to:

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

Does that work on your ipad ?

[Nicolas]

So in my CSS I replaced that:

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

With this:

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

But I kept this, is that ok:

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

Results:
-Desktop: Back to normal
-Smartphone: Still screwed. The images are too big. Can’t them in full.
– iPad: I’m very confused here. The results seem to be different for each category. I confirm I have cleared my cache before checking.

Look, I will share the layout on the ipad for the first Categories (you can find them in the off-canvas menu):
– Bien-être
– Cuisine
– Developpement personnel
– Emotions
– Marketing

See how the blog post entitled “livre sur les émotions : comment gérer vos émotions en 2023” is very different from category
Developpement personnel and category Emotions?

See for Cuisine how the grey rectangle is misaligned under the feature image? And not for other category pages?
See how everything is displaying well for the Emotions category?

[Author]

Posts