woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Add responsive to the welcome page

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-10-23 12:59:41 +02:00
parent 3b6db73e8d
commit d6d2eee54c
No known key found for this signature in database
GPG key ID: D005973F231309F6
4 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss
View file

@ -28,11 +28,12 @@
}
&__content {
max-width: 426px;
max-width: 458px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding:0 16px;
}
&__title {

1
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss
View file

@ -2,4 +2,5 @@
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}

5
modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
View file

@ -1,14 +1,17 @@
.ppcp-r {
&-inner-container {
width: 620px;
width: 652px;
max-width: 100%;
margin: 0 auto;
padding:0 16px;
box-sizing: border-box;
}
&-container {
box-shadow: $shadow-card;
max-width: 1024px;
margin: 0 auto;
}
&-card {

19
modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
View file

@ -1,6 +1,9 @@
.ppcp-r-page-welcome {
.ppcp-r-inner-container {
padding-bottom: 72px;
@media screen and (max-width: 480px) {
padding-bottom: 36px;
}
}
.ppcp-r-welcome-features {
@ -61,4 +64,20 @@
margin-right: 18px;
}
}
@media screen and (max-width: 480px) {
flex-wrap: wrap;
row-gap: 8px;
&__col {
width: 100%;
text-align: center;
&:not(:last-child) {
border-bottom: 1px solid $color-gray-200;
border-right: 0;
padding-right: 0;
padding-bottom: 8px;
}
}
}
}