I am currently using Bootstrap's standard media queries for my project and they are working perfectly, except for small tablets in landscape mode. I have included an image to demonstrate this issue. The problem seems to arise from the custom CSS that I have implemented for various sections of my page, such as margin-top. My client requested the use of non-square background images, which required a significant amount of custom CSS to center text on these images. Dealing with non-square images has been quite challenging, as I have never encountered this issue before. While attempting to align everything within these media queries, I found that it negatively affects other devices.
Is there any suggestion on how to resolve this issue? Would adding additional media queries be necessary to achieve perfect alignment across all devices?
I will only include my media query code and the pricing column code, as there is a lot of code for the entire website. I will also provide a link to the working website. As mentioned, the layout appears fine on mobile portrait, iPad portrait/landscape, and desktop, but there are alignment issues on small tablets or landscape mobile devices.
Website link
https://i.sstatic.net/XrJzO.png
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
...