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

View File

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

View File

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

View File

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

View File

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