[Resolved] How to Decrease the mobile logo div width?

Home Forums Support How to Decrease the mobile logo div width?

  • This topic has 8 replies, 2 voices, and was last updated 10 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1079040
    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

    #1079529
    David
    Staff
    Customer Support

    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.

    #1079535
    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.

    #1079544
    David
    Staff
    Customer Support

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

    #1079561
    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

    #1079610
    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

    #1079670
    David
    Staff
    Customer Support

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

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

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

    #1081307
    David
    Staff
    Customer Support

    Awesome – glad to be of help

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.