Positioned different on mobiles

Hi guys :slight_smile: See the google custom search at the top right of the page here https://bit.ly/2m3LKei. Google went to V2 of its custom search. So I’ve spent the last couple days customizing it to my liking. But I can’t figure out something. On desktops it’s positioned perfectly. On my phone and tablet (apple) the search input is positioned about 10px lower. I could always just target smaller devices but I’d rather find the cleaner actual reason for it. I’m guessing all the tables in there. Can you guys find it? Thanks!

Hi,

Can’t see the different position in e.g. Linux Brave mobile mode.

Desktop and phone/pad display correctly, afaict. :slight_smile:

Thanks for looking Erik. Here is the positioning on desktops.
34%20AM

And here is the positioning on my apple mobiles. I haven’t looked at any other devices yet.

1 Like

Hi Eric,

Apart from the fact that you don’t ‘really’ seem to be catering for mobiles at all :slight_smile: as I have to pinch and zoom to about 400% to read anything on that page on my iphone 5 I can see that you are adding some sort of mobile stylesheet to some devices.

It’s the mobile+en.css stylesheet that is adding 6px padding to the top of those search boxes and changing the alignment.

.gsc-input-box {
  padding-top: 6px;
  padding-bottom: 5px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

That code isn’t present in the desktop versions.

If that is some third party code then you will need to over-ride it in your own stylesheet.

1 Like

Yeah! That did it. Thanks a million PaulOB :slight_smile:

1 Like