I am currently designing a pricing page for my Django application, featuring three columns. The intended design is to display all three columns side-by-side when the screen size is more than 768 pixels, and switch to a single column layout with pricing options stacked vertically when the screen size is less than 768 pixels.
Unfortunately, despite using @media properties to define the responsive behavior based on screen size, the page consistently displays all three columns regardless of the screen width. The screenshot below illustrates the issue, showing three columns instead of a single column layout typically used for mobile-friendly pages.
Current page: https://i.sstatic.net/L2WFH.png
Js Fiddle - LINK Interestingly, the JS Fiddle example linked above does adhere to the @media screen and (max-width) properties as expected.
Code:
<html>
<head>
<style>
// CSS styles and media queries for responsive layout
</style>
</head>
// Body content including pricing options and columns
</html>