Tips for fixing image distortion on screens smaller than 576px in a Bootstrap 5 responsive layout

view image description here

see image details here

    <div class="banner">

    </div>
.banner {
    background-image: url(../img/portada.png);
    height: 20rem;                                 /* Setting height because it is empty*/
    background-size: cover;                        /* Fills all available space */
    background-position: center center;            /* Image grows from the center */
}
@media screen and (max-width: 576px) {
  
  

  .banner{
    width:100%;
  }

Does anyone know why the image stays like that when the screen is smaller than 576px and how to fix it?

Answer №1

background-size: cover guarantees that the background is fully covered, but it does not guarantee that the entire image will be visible. This is why only a portion of it may be seen on smaller screens.

Experiment with switching it to background-size: contain to make sure the entire image is displayed regardless of screen size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

Interacting with a PNG file using a border radius in Internet Explorer 9 is causing issues with its transparency

Encountering an issue with IE9 where a white to gray gradient box appears around the transparent PNG on hover/selection. There is also a border radius applied to the thumbnail. Any ideas on how to fix this problem? Here is an example of the issue: https ...

Tips on eliminating borders in react-table components

Within my React.js component, I have implemented a table using react-table along with some material-ui components displayed alongside the table: import React from 'react' import { useTable, useGlobalFilter, usePagination } from 'react-table& ...

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...

The integration of Express server with static ejs files, CSS, and JavaScript is experiencing technical difficulties

I am currently working on a website using node.js and have created two routes: /home and /contact. Everything was functioning properly until I added CSS and JS files to both routes. For some reason, the second call does not work as expected. When I access ...

A guide on extracting keywords from the tynt API using JavaScript

Looking to extract the inbound keyword from an API: What would be the best way to use JavaScript to extract and display the value of the inbound keyword from this API? ...

Implementing a button row and content alignment next to an image using Bootstrap or CSS

Ensure that the product detail page features a row with labels and buttons, positioned to the right of the image within Bootstrap columns. I have utilized Bootstrap 3 for this page layout. However, upon implementation, I encountered an issue whereby the b ...

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

position the table next to the graph

I'm having trouble moving/placing items in HTML. Can we experiment with rearranging the tables as demonstrated at the bottom (expected output)? Is it feasible to achieve a layout like the one below? Shifting the bottom section up next to the plots. ...

Why is the AJAX request not functioning properly after using jQuery's hide method?

It seems that the first AJAX call works fine when I hide the div, but subsequent requests are not going through. a) Clicking on the signup button triggers an AJAX request to display the details. b) Pressing the hide button hides everything within that di ...

Select option at the top of the Bootstrap dropdown

I recently implemented Bootstrap on my website. I encountered an issue with a form in the footer section where the select options are extending out of the page boundaries. <footer> <form role="form" method="GET"> <div s ...

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same ...

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing. The challenge I'm facing is that for certain rows, I want to apply a specific background color using ...

Finding the correct index number for the active class - a step-by-step guide

I am currently troubleshooting an issue with my demo. I am having trouble retrieving the correct index number of .carousel-item.active. Even when the second slide is displayed, I continue to receive the index of the first slide. var totalItems = $(&apos ...

What is the best way to transfer a row value from one table to another and then reinsert it back into the original table

I attempted to transfer a row value from one table to another and then back to the original table, but unfortunately, I was unable to find a solution. $('#one tbody tr td input.checkbox').click(function() { if ($(this).attr('checked&apo ...

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Here is a demo example showcasing 'Server Sent Events(SSE)': Embed HTML code(index.html) : <!DOCTYPE html> <html> <body> <h1>Receiving server updates</h1> <div id="result"></div> <script> if(type ...

Vue.JS and its Onclick event handler allows for dynamic and interactive

These are my two buttons: <button onclick="filterSelection('Action')">Action</button> and <button onclick="filterSelection('Adventure')">Adventure</button> Now, I'm trying to achieve the same fun ...

Guidance on transferring servlet variables to an HTML page through redirection in Java

I am looking for a way to open an HTML page from my Java servlet and utilize the variables of that servlet to populate the form fields in the HTML page when it is opened. Below is the code snippet of my servlet: import java.io.*; import java.sql.*; impor ...

Tips for managing responsive font sizes as screen size decreases

Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries. You can check out th ...

What is the best way to maintain the layout design when resizing the font?

Here is the HTML and CSS code snippet: .navi ul li { float:left; list-style-type: none; border-right: 1px solid #c0c0c0; margin:0px 0 0 0; } .navi ul li:last-child { border:none; } .navi ul li a { display:block; margin:0 20px; text-dec ...