skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(docs-infra): fix banner position on mobile & tablet (#62521)

Browse Source 
#62509

PR Close #62521
This commit is contained in:
Matthieu Riegler
2025-07-08 15:56:11 +02:00
committed by Andrew Kushnir
parent d5d692766c
commit 2f969c8ac4
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/src/app/features/home/components/home-animation/home-animation.component.scss
+14 -16
View File
@@ -70,7 +70,7 @@ $transition: 200ms linear;
.adev-banner-container {
display: flex;
flex-direction: column;
gap: .5rem;
gap: 0.5rem;
position: absolute;
transition:
background 0.3s ease,
@@ -78,6 +78,19 @@ $transition: 200ms linear;
transform $transition;
top: var(--layout-padding);
left: calc(var(--layout-padding) + var(--primary-nav-width));
@include mq.for-tablet-landscape-down {
top: 6rem;
left: var(--layout-padding);
/* Assuming the container width is identical to the viewport width (mobile device). */
max-width: calc(100% - var(--layout-padding) * 2);
}
@include mq.for-phone-only {
& {
top: 5rem;
}
}
}
.adev-banner {
@@ -93,21 +106,6 @@ $transition: 200ms linear;
width: fit-content;
box-sizing: border-box;
@include mq.for-tablet-landscape-down {
& {
top: 6rem;
left: var(--layout-padding);
/* Assuming the container width is identical to the viewport width (mobile device). */
max-width: calc(100% - var(--layout-padding) * 2);
}
}
@include mq.for-phone-only {
& {
top: 5rem;
}
}
h1,
p {
display: inline;