When CSS media queries are applied, the background color of Div does not fully extend to the edge

Although the problem seems simple, I am finding it difficult to find a solution.

This page was created as part of my course.

https://i.sstatic.net/DKCva.jpg

While in developer mode and trying to resize the screen, I noticed that the background color of the div (with the class ".section-hero") does not stretch to the end.

https://i.sstatic.net/dJ0nf.png

Below is the code snippet:

The HTML section containing

https://i.sstatic.net/yGP13.png

.section-hero is the element with the background color issue, which I want fixed to respond to changing screen sizes.

This is the CSS code:

https://i.sstatic.net/u042j.png

https://i.sstatic.net/DLn4p.png

I have also included in the header of my HTML document.

Your assistance on this matter would be greatly appreciated.

javascripthtmlcssuser-interface

Answer №2

Consider placing the following code snippet within the .section-hero selector in your CSS stylesheet:

background-size: cover;

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

What is the best way to align 3 divs next to each other with spacing and borders?

I'm having trouble aligning three divs side by side. When I try to add borders and a small gap between each div, the third div ends up on a new line. Is there a way to automatically resize the divs so they fit together? HTML: <div class="trendi ...

htmlcsstwitter-bootstrap

Mastering various techniques for creating styles with makeStyles in React JS Material-UI

As a newcomer to React JS and Material UI, I am experimenting with creating various styles of buttons. Each button should have a unique appearance based on attributes like name= submit, ok, cancel, confirm, alert. App.JS import CssButton from './con ...

javascriptreactjsmaterial-uimakestyles

Next.js allows for passing dynamically loaded server-side data to all components for easy access

(I've recently started working with Next.js and inherited a project built using it, so please forgive me if this is something obvious that I'm missing) I have a set of data that needs to be loaded server-side on each request. Initially, I had im ...

javascriptnext.jsmiddlewarereact-context

Struggles with loading order in Knockout.JS

I've encountered an issue with loading my scripts properly for a page utilizing a knockout.js form. Upon page load, my viewmodel js file isn't immediately loaded, resulting in errors that cause the validation messages to flash and hidden divs to ...

javascriptjquerycakephpknockout.js

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

Using Angular 2 to fetch barcode scanner information without the need for HTML input or textarea elements

Currently, I am in the process of developing a web application that utilizes a barcode scanner, specifically the Motorola TC55 model. My primary objective is to scan product EAN codes without the need for using HTML input or textarea elements. The reasoni ...

javascripthtmlangularbarcode

Create dynamic elements within bootstrap-vue using data from a JSON file

Currently, I am utilizing BootstrapVue (Bootstrap 4.6 and VueJS 2)! My objective is to dynamically generate elements such as input fields, dropdowns, and checkboxes based on a JSON file structured like so: [ { "unique_number": "1111", "key": ...

javascriptjsonvue.jsvuejs2bootstrap-vue

Encountered a problem while attempting to start the npm http-server

My project is built on node.js and Angular 2, initially served using lite-server. Now, I need to serve server-side files, so I am switching to http-server. Previously, I used the command "start": "tsc && concurrently \"tsc -w\" \"lite-server ...

javascriptnode.jshttpnpmserver

"Validation with Express-validator now includes checking the field in cookies instead of the request

My current validator is set up like this: const validationSchema = checkSchema({ 'applicant.name': { exists: true, errorMessage: 'Name field is required', }, }); and at the beginning of this route (the rest is not relevant) ...

javascriptnode.jsexpressmulterexpress-validator

Tips for computing values with changing ng-model identifiers

In my angular application, I have a function that creates tables using directives. Each field in the tables must have unique ng-model names so that I can calculate each table individually. To achieve this, I implemented a counter that increments with each ...

javascriptangularjs

Leveraging the power of ng-describe for comprehensive end-to-end testing using protractor

Recently, I stumbled upon a fantastic ng-describe package that simplifies the process of writing unit tests for AngularJS applications. It eliminates the need to remember and write all the boilerplate code required to load, inject, mock, or spy. Has anyon ...

javascriptangularjstestingprotractorngdescribe

Modify the current link's <li> class

I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...

javascriptjquerycss

When performing an Angular HTTP post, additional parameters are automatically included in the request

Within a directive, I have the following code block: scope.progressCourse = -> req_data = course_id: scope.course.id success: true $http.post( "<%= Rails.application.routes.url_helpers.progress_course_path %>", req_data ).t ...

javascriptjqueryruby-on-railsangularjs

What is the best way to extract the singular PDF link from a webpage?

Currently, I am attempting to utilize Selenium in Java to access DOM elements. However, I have encountered an issue while testing the code: Exception in thread "main" org.openqa.selenium.StaleElementReferenceException: stale element reference: element is n ...

javascriptjavaseleniumweb-scrapingdom

What could be the reason for the base64 returned by url-loader in webpack appearing to be

After downloading and including the url-loader for Webpack, my configuration looks like this: loaders: [ { test: /.jsx?$/, include: path.join(__dirname, './public/scripts'), loader: 'babel-loader', exclude: /node_modul ...

javascriptimagereactjswebpackloader

My line occupies an excessive amount of vertical space

Working on a practice website and realizing my CSS skills are a bit rusty. Struggling with the height of a row in my container, as it's taking up too much space. Also, having trouble positioning the second row below the first one without it ending up ...

htmlcssbootstrap-4

Sending an array from the server to the client using Node and Express during page loading?

I am utilizing Node and Express in my project. The application fetches data from a remote database on page load and sends it to a handlebars template server-side. However, I would like this JSON data to also be accessible for client-side interactions. How ...

javascriptnode.jsexpress

Attempting to recreate the dynamic banner featured in the video

Looking to replicate a setup similar to what was demonstrated in the video. I have two div blocks - one with a random image and the other with a video, and I want them to be as flexible and identical as possible to the video layout. How should I go about a ...

javascripthtmlcssweb

In Vue js, where is the best place to incorporate something similar to a 'base.html' template?

My transition from a Flask backend without a front end framework to Vue.js (with no chosen backend yet) has me considering how to structure my project. Previously, I would create a 'base.html' file that contained all the necessary HTML code, depe ...

javascriptvue.jsvuejs2

Attempting to store an array of JSON objects in the state, and then utilizing the `map` method to render

I'm just starting out with React. Currently, I'm attempting to store an array of JSON objects in the state and then map those items into the component render. I'm feeling a bit lost on how to debug this as there are no console errors showi ...

javascriptreactjsaxios