From 71a010639b9655e3cfc0f04ea2ac2e9a9aca40cd Mon Sep 17 00:00:00 2001 From: Arshia Date: Tue, 5 Nov 2024 22:39:05 +0530 Subject: [PATCH] Add responsive code --- styles/view.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/styles/view.css b/styles/view.css index c2194b5a..4f7bd274 100644 --- a/styles/view.css +++ b/styles/view.css @@ -88,3 +88,44 @@ body { color: white; background-color: var(--secondary-color); } + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .modal-content { + flex-direction: column; /* Stack content vertically on smaller screens */ + } + + .modal-right h2 { + font-size: 20px; /* Adjust heading size for mobile */ + } + + .modal-right p, .modal-right .price { + font-size: 16px; /* Adjust text size for readability */ + } + + .quick-view-btn, .close { + font-size: 20px; /* Adjust button size */ + } + + .modal { + padding: 10px; /* Add padding around the modal for smaller screens */ + } +} + +@media (max-width: 480px) { + .modal-content { + width: 95%; /* Further reduce modal width for very small screens */ + } + + .close { + font-size: 24px; /* Smaller close button */ + } + + .modal-right h2 { + font-size: 18px; + } + + .modal-right p, .modal-right .price { + font-size: 14px; + } +} \ No newline at end of file