Footer should be properly responsive #18

New issue

Closed

opened 2023-02-10 01:52:08 +01:00 by zotan · 2 comments

zotan commented

2023-02-10 01:52:08 +01:00

Owner

Currently, I made sure the (now slightly longer) footer doesn't break responsiveness like this:

.footer {
  overflow: hidden;
}

(

overflow: hidden;

)

There probably is a better solution, right?

Currently, I made sure the (now slightly longer) footer doesn't break responsiveness like this: ``` .footer { overflow: hidden; } ``` (https://git.ztn.sh/AfRA/AfRApay/src/commit/68c5c3052cd4692d044cfddb327670a7f168488b/AfRApay.Web/wwwroot/css/site.css#L72) There probably is a better solution, right?

zotan added this to the (deleted) milestone 2023-02-10 01:52:12 +01:00

enbyfoxen was assigned by zotan

2023-02-10 01:52:20 +01:00

enbyfoxen commented

2023-02-10 13:19:23 +01:00

Member

This has been fixed with c2f3e25164.

The footer is now fully responsive. With columns used for the elements that arrange into vertical on space constraints.

<footer class="border-top footer mt-auto text-muted">
	<div class="container">
		<div class=row>
			<div class="col px-1 col-auto">
				&copy; @DateTime.Now.Year - <a href="https://git.ztn.sh/AfRA/AfRApay" target="_blank">AfRApay</a> team.
			</div>
			<div class="col px-1 col-auto">
				Powered by AfRApay <a class="footerlink" href="https://git.ztn.sh/AfRA/AfRApay/commit/@Utils.LinkVersion" target="_blank">@Utils.Version</a> on .NET @Environment.Version
			</div>
		</div>
	</div>
</footer>

The page body itself is now a flex of full viewport height, with the footer pushing itself to the bottom.

<body class="d-flex flex-column min-vh-100">

This has been fixed with [c2f3e25164](https://git.ztn.sh/AfRA/AfRApay/commit/c2f3e25164a6eff6a93821be491f1237ca258d46). The footer is now fully responsive. With columns used for the elements that arrange into vertical on space constraints. ```html <footer class="border-top footer mt-auto text-muted"> <div class="container"> <div class=row> <div class="col px-1 col-auto"> © @DateTime.Now.Year - <a href="https://git.ztn.sh/AfRA/AfRApay" target="_blank">AfRApay</a> team. </div> <div class="col px-1 col-auto"> Powered by AfRApay <a class="footerlink" href="https://git.ztn.sh/AfRA/AfRApay/commit/@Utils.LinkVersion" target="_blank">@Utils.Version</a> on .NET @Environment.Version </div> </div> </div> </footer> ``` The page body itself is now a flex of full viewport height, with the footer pushing itself to the bottom. ```html <body class="d-flex flex-column min-vh-100"> ```

zotan commented

2023-02-10 14:44:50 +01:00

Author

Owner

Perfect, thank you so much!

zotan closed this issue

2023-02-10 14:44:50 +01:00

zotan modified the milestone from (deleted) to AfRApay rev2

2023-02-11 03:38:32 +01:00

No labels