search

gohugoio / gohugoioTheme

A [wip] theme for the gohugo.io home page, docs and theme sites.
MIT License
105 stars 63 forks source link

Displays incorrectly on iPad #275

Open Resonanz opened 4 years ago

Resonanz commented 4 years ago

The black header bar displays incorrectly on iPad in landscape mode. The magnifying glass in the search box is not situated correctly, and the Twitter and github icons on the right hand side are not aligned correctly in the vertical direction.

davidsneighbour commented 4 years ago

Please add a screenshot?

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. If you still think this is important, please tell us why. This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

polarweasel commented 2 years ago

Here's a screenshot from today, on an iPad Air 2 running iOS 15.4. Note the overlap of the search input field and the Twitter and GitHub icons.

IMG_0453

thewheat commented 2 years ago

I believe this can be replicated in Chrome dev tools as shown below

image

It seems just a minor overlap to me and I'm not sure what would the best way to tackle it: tried a couple of ways but there are issues and I think leaving this as is would be a minor thing since it is a slight overlap at the end of the box

Option 1) Reduce padding of social to 0

Issue that is looks odd to me without padding

https://github.com/thewheat/hugoDocs/pull/new/fix-ipad-display-option-1

image

Option 2) Add right padding to the search bar so that there is space without overlapping

https://github.com/gohugoio/hugoDocs/compare/master...thewheat:hugoDocs:fix-ipad-display-option-2?expand=1

image

Caveat with this is that at 1024px the search is now on a second line

image

Option 3) Reduce right margin of menu items to allow extra space without overlap

This probably has the least caveats but there is still a very slight overlap and things feel a bit more cramped and if the menu items change to be longer it would still overlap

https://github.com/gohugoio/hugoDocs/compare/master...thewheat:hugoDocs:fix-ipad-display-option-3?expand=1

image

Am open to other suggestions that I can try test out