Positioned different on mobiles

HTML & CSS
1

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!

2

Hi,

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

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

3

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.

IMG_0038
IMG_00381823×351 145 KB

1 Like
4

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
5

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

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.