[Support request] Layout for my Categories

[David]

Hi there,

a) you have this CSS in your Child Theme styles.css:

@media (min-width: 769px) {
.nav-float-right #site-navigation {
        flex: 1;
        margin-left: 350px;
    }
.menu-bar-items {
        margin-left: auto;
    }
}

Which is reducing the width of the navigation causing that issue.

b) i do not see that problem on any device i checked on. Can you try clearing the device caches ?

[Nicolas]

Hi,
This code was provided by Yin some months ago to fix a bug there was with the search box.
Please see the history here: https://wordpress.org/support/topic/minimalist-search-button-like-this-how/

I removed the lines and the bug appears again. Just try typing some text in the search box.

Looking forward to your instructions to fix this issue AND the ones for the ipad, since they seem to be connected.
I cleared my cache and the issues a and b are still there.
Look.
And now there is the searchbox issue that came back since I removed the code you mentioned above.

Thank you

[David]

Did you make changes ? As i see neither of those issues.

[Nicolas]

No David.
I’m very surprised. Please clear your cache 🙂 Just kidding…

For the iPad, I do not what to say except sharing again my screenshot.

Regarding teh searcbox, I took a screenshot again, 10 seconds ago.

[Fernando]

I’m not seeing the issue as well from my end. See: https://share.getcloudapp.com/nOu1vOD8

I tested it on an iPad Pro 12.9.

It’s likely a caching issue from your end. Can you try testing on a friend’s or family member’s iPad to test?

[Nicolas]

Hi there,

On your screenshot, I cannot see the image features of the blog posts. That’s where the issue is (on my side at least).
I have no friend with iPad, unfortunately.

Thank you

[David]

For the search field, the simplest fix would be to do what you have on your mobile ie. open the search field below the meni items:

.navigation-search.nav-search-active {
    top: 100%;
}

The Featured image issue – i do not see this problem on any device i tested. What iPad are you viewing those on ?

[Nicolas]

Hello,

My ipAd is:
– iPad Air.
– Software version: 12.5.6.

1. I implemented:

.navigation-search.nav-search-active {
    top: 100%;
}

2. I just completely cleared my iPad cache again.

A – I confirm I still have:
– the display issue on all the Category archives that you can click on my Off-canvas menu.
– the search box issue.
Look at this fresh screenshot.
How to fix this?

B – Also, on my smartphone, the searchbox now appears in full with a blue border.
How to replace this with my main site color, that is: #E67130

C – Should I completely delete the code snippet provided by Ying earlier to fix the searchbox issue [it is now active right now]:

/*@media (min-width: 769px) {
.nav-float-right #site-navigation {
    flex: 1;
    margin-left: 350px;
}
.menu-bar-items {
    margin-left: auto;
}
}*/

[David]

Lets fix the search field first.
Can you remove the CSS Ying provided ie.

@media (min-width: 769px) {
.nav-float-right #site-navigation {
    flex: 1;
    margin-left: 350px;
}
.menu-bar-items {
    margin-left: auto;
}
}

And add the CSS i provided ie.

.navigation-search.nav-search-active {
    top: 100%;
}

[Nicolas]

David, I had already done this prior to my previous message.

[David]

And is working ok now ?

[Nicolas]

No improvement.

[David]

This is what i see on my Simulator tools which is an accurate reflection of my actual iPad:

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

[Nicolas]

David, I see, thank you.
But trust me, we’ve been exchanging about this for a week or so now: It still does not work on the iPad Air.
This is how Safari displays it.

1. The Search box is issue is solved on all devices.
Can you please just tell me to replace its blue border by my main site color, that is: #E67130

2. But the feature image are still screwed on the ipad Air as show here.
I rebooted, cleared my chace a dozen time, etc.

[Fernando]

1. Which blue border are you referring to? Can you take a screenshot of this as well?

2. This is how I see it on an iPad Air 5 on Safari: https://share.getcloudapp.com/eDun5lP7

What specific version of iPad Air do you have?

Do you know someone else who has an iPad who can test it? From our end, on our iPads, it seems good.

[Author]

Posts