fix modal mobile size

This commit is contained in:
chris 2025-02-20 11:35:21 -05:00
parent 58a3275a49
commit 664c95820f
5 changed files with 62 additions and 29 deletions

View File

@ -49,21 +49,24 @@
color: #4a4a4a; color: #4a4a4a;
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 110%; /* Slightly larger max-width */ max-width: 90vw;
max-height: 98vh; /* Slightly larger max-height */ max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -72,6 +75,10 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -64,21 +64,24 @@ cat > "$OUTPUT_FILE" <<EOL
color: #4a4a4a; color: #4a4a4a;
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 110%; /* Slightly larger max-width */ max-width: 90vw;
max-height: 98vh; /* Slightly larger max-height */ max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -87,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -66,20 +66,22 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 90%; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -88,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -64,21 +64,24 @@ cat > "$OUTPUT_FILE" <<EOL
color: #4a4a4a; color: #4a4a4a;
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 90%; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -87,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -66,20 +66,22 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 90%; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -88,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>