Password setup screen on mobiles doesn't work properly

Question

I am running a multi user site on Craft 3. When a new user is trying to set up their password for the first time, the default craft password setup page is not working on mobiles.

It seems like the following tag is breaking the design:

<a class="skip-link btn" href="#main">Skip to content</a>

This tag has the following CSS styles that breaks the design and pushes the password setup form out of the visible part of the screen:

.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 101;}

Fixing the CSS is easy but I am not sure how can I affect the css that Craft is using by default. As far as I am aware, there is no access to those files. Is there a way to affect the default styles?

Answer 1

You won't be able to modify the Craft CMS core CMS files (especially if you are using composer as the entire CMS is deployed in the vendor folder), but you can load in your own resources like CSS and JS through an assetbundle in a module, or you can use a plugin like: https://plugins.craftcms.com/cp-css to load custom CSS.

Although, if you think there's an issue in core Craft CMS, you can report an issue to the GitHub page for comment from the developers: https://github.com/craftcms/cms/issues.

The CSS rule you have identified will be related to accessibility for screen reader users to skip to the main content on the page.

Edit: This may have been a bug with Craft CMS, see: https://github.com/craftcms/cms/issues/11375