Archived topic

How to Decrease the mobile logo div width?

8 replies · Started by Atef on November 26, 2019

Viewing posts 1–9 of 9

November 26, 2019 at 10:45 pm #1079040

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

November 27, 2019 at 4:45 am #1079529

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.

November 27, 2019 at 4:55 am #1079535

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.

November 27, 2019 at 5:01 am #1079544

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

November 27, 2019 at 5:14 am #1079561

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

November 27, 2019 at 5:45 am #1079610

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

November 27, 2019 at 6:07 am #1079670

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

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

November 28, 2019 at 5:30 am #1081287

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

November 28, 2019 at 5:42 am #1081307

Awesome - glad to be of help

This archived topic is closed to new replies.

Start building better websites today.