Make the 784px transition seamless and remove weird margins under 808px

This commit is contained in:
Aurélien Hamy 2025-05-22 15:52:25 +02:00
parent 9a71d22a3c
commit d141e6a488
No known key found for this signature in database
GPG Key ID: EB3A799E7EE716EB

View File

@ -1,6 +1,6 @@
From cd751a34fc5116acd6fbcd83246212d002241bf3 Mon Sep 17 00:00:00 2001 From 33ed1cce4b8831fc6412ca482d9867a9dff9ffec Mon Sep 17 00:00:00 2001
From: Aurélien Hamy <me@aunetx.dev> From: Aurélien Hamy <me@aunetx.dev>
Date: Wed, 21 May 2025 22:06:05 +0200 Date: Thu, 22 May 2025 15:50:44 +0200
Subject: [PATCH] feat: improve responsiveness on small devices Subject: [PATCH] feat: improve responsiveness on small devices
Based on patch by josselinonduty <contact@josselinonduty.fr> Based on patch by josselinonduty <contact@josselinonduty.fr>
@ -8,15 +8,15 @@ Makes it possible to use the application for with a width as low as 550 pixels
without problems, and is usable even below. Should not change anything for without problems, and is usable even below. Should not change anything for
devices larger than 950 pixels, and nearly nothing above 800 pixels wide. devices larger than 950 pixels, and nearly nothing above 800 pixels wide.
--- ---
build/index.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++ build/index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++
build/main.js | 4 +-- build/main.js | 4 +--
2 files changed, 76 insertions(+), 2 deletions(-) 2 files changed, 85 insertions(+), 2 deletions(-)
diff --git a/build/index.html b/build/index.html diff --git a/build/index.html b/build/index.html
index 8016bc8..9db7678 100644 index 8016bc8..4efcd23 100644
--- a/build/index.html --- a/build/index.html
+++ b/build/index.html +++ b/build/index.html
@@ -4,6 +4,80 @@ @@ -4,6 +4,89 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Deezer</title> <title>Deezer</title>
<script defer="defer" src="./renderer.js"></script> <script defer="defer" src="./renderer.js"></script>
@ -42,7 +42,16 @@ index 8016bc8..9db7678 100644
+ +
+ /* this prevents the content from overflowing */ + /* this prevents the content from overflowing */
+ @media screen and (max-width: 808px) { + @media screen and (max-width: 808px) {
+ .container > div:first-child { + .container > .carousel-wrapper {
+ width: 100% !important;
+ margin: 0px;
+ padding: 0px;
+ }
+ }
+
+ /* this makes the width transition seamless for carousels */
+ @media only screen and (max-width: 784px) {
+ .container {
+ width: 100% !important; + width: 100% !important;
+ } + }
+ } + }