Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added max padding limit to Signup and Header cards

Browse source 
refs https://forum.ghost.org/t/anyone-else-seeing-page-too-wide-errors/40695

- google search console snapshots websites with their full height instead of scrolling
- that makes the value of vmax too much, especially when a page has lots of content
- this fixes the issue by adding max limit to the padding values with vmax
This commit is contained in:
Sodbileg Gansukh 2023-08-30 17:41:22 +08:00
parent 84e1f11494
commit c759f419a1
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ghost/core/core/frontend/src/cards/css/header_v2.css
View file

@ -35,30 +35,30 @@
align-items: flex-start;
justify-content: center;
height: 100%;
padding: 6.4vmax 4vmax;
padding: min(6.4vmax, 120px) min(4vmax, 80px);
background-size: cover;
background-position: center;
text-align: left;
}
.kg-width-wide .kg-header-card-text {
padding: 10vmax 6.4vmax;
padding: min(10vmax, 220px) min(6.4vmax, 140px);
}
.kg-width-full .kg-header-card-text {
padding: 12vmax 0;
padding: min(12vmax, 260px) 0;
}
.kg-layout-split .kg-header-card-text {
padding: 12vmax 4vmax;
padding: min(12vmax, 260px) min(4vmax, 80px);
}
.kg-layout-split.kg-content-wide .kg-header-card-text {
padding: 10vmax 0 10vmax 4vmax;
padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
}
.kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text {
padding: 10vmax 4vmax 10vmax 0;
padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
}
.kg-swapped .kg-header-card-text {
@ -160,7 +160,7 @@
}
.kg-header-card.kg-width-full h3.kg-header-card-subheading:not(.kg-layout-split h3.kg-header-card-subheading) {
max-width: 65vmax;
max-width: min(65vmax, 1200px);
font-size: clamp(1.05em, 2vw, 2.6rem);
}
@ -227,12 +227,12 @@
}
.kg-width-wide .kg-header-card-text {
padding: 6.4vmax 4vmax;
padding: min(6.4vmax, 120px) min(4vmax, 80px);
}
.kg-layout-split.kg-content-wide .kg-header-card-text,
.kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text {
padding: 9.6vmax 0;
padding: min(9.6vmax, 180px) 0;
}
.kg-header-card.kg-width-full h3.kg-header-card-subheading:not(.kg-layout-split h3.kg-header-card-subheading) {

24
ghost/core/core/frontend/src/cards/css/signup.css
View file

@ -28,30 +28,30 @@
align-items: flex-start;
justify-content: center;
height: 100%;
padding: 4vmax;
padding: min(4vmax, 80px);
background-size: cover;
background-position: center;
text-align: left;
}
.kg-width-wide .kg-signup-card-text {
padding: 6.4vmax;
padding: min(6.4vmax, 120px);
}
.kg-width-full .kg-signup-card-text {
padding: 12vmax 0;
padding: min(12vmax, 260px) 0;
}
.kg-layout-split .kg-signup-card-text {
padding: 12vmax 4vmax;
padding: min(12vmax, 260px) min(4vmax, 80px);
}
.kg-layout-split.kg-content-wide .kg-signup-card-text {
padding: 10vmax 0 10vmax 4vmax;
padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
}
.kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
padding: 10vmax 4vmax 10vmax 0;
padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
}
.kg-swapped .kg-signup-card-text {
@ -153,7 +153,7 @@
}
.kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {
max-width: 65vmax;
max-width: min(65vmax, 1200px);
font-size: clamp(1.05em, 2vw, 2.6rem);
}
@ -176,17 +176,17 @@
.kg-signup-card-heading + .kg-signup-card-form,
.kg-signup-card-subheading + .kg-signup-card-form {
margin: 2.4vmax 0 0;
margin: min(2.4vmax, 48px) 0 0;
}
.kg-width-wide .kg-signup-card-heading + .kg-signup-card-form,
.kg-width-wide .kg-signup-card-subheading + .kg-signup-card-form {
margin: 3.2vmax 0 0;
margin: min(3.2vmax, 64px) 0 0;
}
.kg-width-full .kg-signup-card-heading + .kg-signup-card-form,
.kg-width-full .kg-signup-card-subheading + .kg-signup-card-form {
margin: 4vmax 0 0;
margin: min(4vmax, 80px) 0 0;
}
.kg-signup-card-fields {
@ -338,12 +338,12 @@
}
.kg-width-wide .kg-signup-card-text {
padding: 6.4vmax 4vmax;
padding: min(6.4vmax, 120px) min(4vmax, 80px);
}
.kg-layout-split.kg-content-wide .kg-signup-card-text,
.kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
padding: 9.6vmax 0;
padding: min(9.6vmax, 180px) 0;
}
.kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {