gohugoioTheme
gohugoioTheme copied to clipboard
gohugoio
Displays incorrectly on iPad
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.
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.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
I believe this can be replicated in Chrome dev tools as shown below
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
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
Caveat with this is that at 1024px the search is now on a second line
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
Am open to other suggestions that I can try test out
