Displaced sidebar elements on mobile platforms

[domsalisbury]

On mobile platforms, the sidebar is of course no longer a sidebar, but rather appears horizontally under the masthead. I have an issue in that the elements are displaced to the right when no avatar is used (see attached photo, which shows my homepage).

Is there a quick way to get the name and bio aligned to the left of the page? I don't want any changes to the layout and positioning on desktop platforms.

TIA.

[domsalisbury]

Bumping this, as I never got an answer, and it's been 18 months!

[domsalisbury]

Sure. Live website is here: https://domsalisbury.github.io/ (You'll have to view this on a mobile device to see the issue).

Repository is here: https://github.com/domsalisbury/domsalisbury.github.io

It just looks really ugly with the follow button instead of the sidebar on mobile devices. It would look better if it wasn't displaced (note no avatar — which might be why it is displaced), but getting rid of the author profile stuff on mobile might be a solution.

[iBug]

Looks like you'll be able to get away with this by setting padding-left to zero for .author__content:

Refer to customizing CSS in the documentation for guidance.

[domsalisbury]

Now I'm really confused. I played about with this, and now it seems to be aligned left. I'm confused because in my current code I have not removed the 15px padding....

Are you able to check the site again @iBug? I'm not very good with html and css, and don't have a mobile emulator or whatever you call them!

[iBug]

Looking good.

Plus you don't even need a "mobile emulator". Just press F12 on your PC browser and hit the "mobile screen" button. Alternatively you can resize the viewport to a narrower area, as "responsive view" works on the viewport width and cares nothing about the actual device.

[domsalisbury]

Thanks for your help. I'm on macos, but I will read up on how to test this.