Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Issues with Google Custom Search - bottom border missing

Featured Replies

Hi all, I'm new here - and to web design in general!

 

My first website project is www.thelastminis.com, which I built using Weebly. I tried adding a Google custom search bar to the homepage, but as you can see the bottom part of the border for the search box is missing.

 

I've tried several solutions I've found on the internet but none have seemed to work - does anyone have any idea how to solve this issue in CSS? Any help with it would be much appreciated, as I think it's letting the site down at the moment.

 

Any more general feedback on the site would be welcome too.

It is down to the input box overlapping the border.

 

Using inspect element I removed the top padding from '.gsib_a' it was '4px 6px 0' if you change it to '0 6px 0' then the bottom border is there.

  • Author

It is down to the input box overlapping the border.

 

Using inspect element I removed the top padding from '.gsib_a' it was '4px 6px 0' if you change it to '0 6px 0' then the bottom border is there.

Thanks a lot for your help, that worked. How do I save that so it displays like that all the time? I can get it to change using inspect element but not sure how to save it.

 

Thanks again.

  • Author

I just added this in CSS and it changed correctly when I previewed it, but I've published the site and the issue is still there.

 

.gsib_a {
padding: 0 6px 0;
}

if this is being pulled in from Google using their styles you should be able to override this by changing your code to:

 

.gsib_a {
padding: 0 6px 0 !important;
}
  • Author

 

if this is being pulled in from Google using their styles you should be able to override this by changing your code to:

 

.gsib_a {
padding: 0 6px 0 !important;
}

 

Of course, missed the !important off. Thanks a lot, much appreciated. :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.