I am currently working on making my entire content responsive. While I have successfully made the background responsive using different @media resolutions, I am facing an issue with the image in the foreground that is not scaling accordingly. I tried putting the image in its own @media to make it scale somewhat with the rest of the content, but I am concerned about having too many @media queries in my CSS file. I am using Bootstrap 5.1 for this project.
Below is a snippet of my code:
<!DOCTYPE html>
<!-- HTML code goes here -->
CSS
body
{
/* Body CSS goes here */
}
@media queries and CSS styling
{
/* CSS styling based on different resolutions */
}
Is there an efficient way to handle responsiveness without having multiple @media queries, or do I need to continue with this approach to achieve the desired results? Any guidance would be appreciated.
For reference, I have been using the Bootstrap 5.1 documentation - https://getbootstrap.com/docs/5.1/layout/containers/ and https://www.w3schools.com/bootstrap5/bootstrap_containers.php