Website redesign - Fixing premium badges and buttons on mobile design (#16718)

* fixing premium badge display on every page

* Aligning header sections and fixing buttons

This aligns the header section to the left on mobile layouts
This also fixes the buttons width on mobile layouts

GitOrigin-RevId: 795af064989272969a5707c086b422b4be58ec25
This commit is contained in:
Davinder Singh 2024-01-26 11:00:00 +00:00 committed by Copybot
parent 3e36369433
commit f09d481eea

View file

@ -710,6 +710,21 @@
}
}
.heading-section-md-align-left {
@media (max-width: @screen-md-min) {
display: flex;
flex-direction: column;
align-items: baseline;
h2 {
text-align: left;
}
p {
text-align: left;
}
}
}
.mono-text {
font-family: 'DM Mono', monospace;
color: var(--green-60);
@ -857,14 +872,18 @@
justify-content: center;
}
&.align-left-button-sm {
@media (max-width: @screen-sm-max) {
flex-direction: column-reverse;
width: 100%;
justify-content: start;
}
}
}
.label-premium {
height: 20px; // override default height
}
.label-premium-block-md {
@media (max-width: @screen-md-max) {
display: block;
width: fit-content;