How to Decrease the mobile logo div width?

[Atef]

Hi,
I am trying to add a google custom search engine box to my sticky mobile header.

the way to add google custom search is by adding a javascript link to the page header, then adding a div tag wherever you want to show the search box.
I did this successfully, but the google search box is very small. I “inspected” the area around the logo and there is a div tag occupying a very big area.
I need your help in decreasing this unused area, so I can expand the Google search box, please

here is a screenshot of the inspection:
http://prnt.sc/q2mjpm

the mobile test can be done here:
https://coptic-treasures.com/glossary/

thanks in advance

[David]

Hi there,

you’re site looks different to the link image you provided.
Can you return it to that view? And then disable your cache and i can take a look at how to resolve.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Atef]

Hi David,
No the page is the same. The screenshot is for the mobile view.
Can you please check this page from mobile or resize the desktop browser to the narrowest width?
you will see exactly the screenshot I provided.

My question is regarding the mobile view, not desktop.

https://coptic-treasures.com/glossary/

Thanks.

[David]

I am seeing the Search field 100% wide above the Menu and Logo

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Atef]

Hi David,
I am not sure why you are seeing this.
I have cleared all cache and CDN.

Here are screenshots from 2 different phone, each one with 2 different browsers. All showing the same layout as when you resize the desktop to be narrow.
can you please recheck?

Galaxy S7 – Google Chrome Mobile Browser:
https://prnt.sc/q2tb2q

Galaxy S7 – Samsung Mobile Browser:
https://prnt.sc/q2tbqv

Galaxy S9+ – Google Chrome Mobile Browser:
https://prnt.sc/q2tbyf

Galaxy S9+ – Samsung Mobile Browser:
https://prnt.sc/q2tc5k

[Atef]

Hi David,
I created a comparison between Microsoft edge, firefox and chrome.
it seems that Edge displays the behaviour you described.
not sure why.
here is the comparison:
https://prnt.sc/q2txl7

[David]

Probably the CDN taking a while to propegate.
In theory this should work:

#___gcse_0 {
    flex: 1;
    margin: 0 10px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Atef]

Thanks a lot David. the code you provided saved the issue.
cheers.

[David]

Awesome – glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts