Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white space.

Here is the HTML I am using:

<div className="first-layer">
    <div className="background-wrapper">
        <Navbar></Navbar>
        {/* <Overview></Overview> */}
    </div>
</div>

This is my navbar code:

<div className="navbar-container">
    <div className="logo">Razark</div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="TierList">Tier List</a></li>
        <li><a href="About">Blog</a></li> 
        <li><a href="About">About</a></li> 
    </ul>
</div>

And this is the CSS being used:

*{
    margin: 0;
    padding: 0;
}
.background-wrapper {
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to top, 
        rgba(41, 0, 37, 0.5),
        /* more gradients */
    );
    /* other styles */
}

.navbar-container{
    display: flex;
    /* other styles */
}
/* Other styles for Navbar */

.left-overview{
    /* comment out */
}
.right-overview{
    /* other styles */
}

My question is, how can I ensure that the background always shrinks regardless of the elements and page size?

Answer №1

Could you provide further details about your issue? When I tested the code in an online compiler, I noticed that the main problem is related to responsive design, specifically with navigation overflowing and causing a horizontal scrollbar due to exceeding the width of the containing div element. To address this, adjusting the overflow property should resolve the whitespace issue.

Answer №2

Media queries have been implemented to ensure responsiveness and the desired display outcome. The use of viewport width units allows elements to adjust according to screen size. Here are the modifications that have been made:

@media screen and (max-width: 630px){
    .navbar-container ul li a {
        font-size: 2.5vw;               
        padding: 0 3.5vw 0 3.5vw;                  
    }
}

@media screen and (max-width: 630px){
    .logo{                                                
        font-size: 5vw;
    }
}

*{
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}
.background-wrapper {
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to top, 
        rgba(41, 0, 37, 0.5),
        rgba(47, 2, 43, 0.5),
        rgba(54, 0, 49, 0.5),
        rgba(62, 2, 56, 0.5),
        rgba(69, 2, 62, 0.5),
        rgba(71, 1, 67, 0.5),
        rgba(74, 1, 71, 0.5),
        rgba(76, 0, 76, 0.5),
        rgba(73, 0, 80, 0.5),
        rgba(69, 0, 84, 0.5),
        rgba(64, 0, 88, 0.5),
        rgba(58, 1, 92, 0.5)
    );
    background-size: cover;
    position: absolute;
    background-position: center;
    background-attachment: fixed;
}

.navbar-container{
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 999px;
    justify-content: space-between;
    /* border: 3px solid red; */
}
.navbar-container ul{
        /* border: 3px solid red; */
    background-color: rgba(41, 0, 37, 0.3);
    border-radius:999px ;
    margin-right: 30px;
    display: flex;
    justify-content: space-between;
}
.navbar-container ul li{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar-container ul li a {
    font-family: 'Lobster', cursive;
    font-size: 18px;

    color: white;
    padding:0px 30px 0px 30px;
    text-decoration: none;  
}

@media screen and (max-width: 630px){
    .navbar-container ul li a {
        font-size: 2.5vw;               
        padding: 0 3.5vw 0 3.5vw;                  
    }
}

.navbar-container ul li a:hover{
    color: #0affc2;
}
.logo{
    display: flex;
    flex-wrap: wrap; 
    padding-left: 30px;
    color: white;
    font-weight: 48px;
    font-family: 'Pacifico', cursive;
    font-size: 36px;
}

@media screen and (max-width: 630px){
    .logo{                                                
        font-size: 5vw;
    }
}

.Overview{
    /* column-gap: 2rem;
    column-count: 2; */
}

.left-overview{
    /* border: 3px solid red; */
}
.right-overview{
    line-height: 1.5;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    /* border: 3px solid red; */
    margin: 0px 0px 0px 0px;
}
<div class="first-layer">
    <div class="background-wrapper">
        <div class="navbar-container">
            <div class="logo">Razark</div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="TierList">Tier List</a></li>
                <li><a href="About">Blog</a></li> 
                <li><a href="About">About</a></li> 
            </ul>
        </div>
    </div>
</div>

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

When using React Router, the URL may change without affecting the view immediately. However, pressing enter in the browser tab will update the view accordingly

I am experiencing an issue with my user list page. The users are displayed as links and when I click on a user, the URL changes but the view does not update. Strangely, if I press enter again on the same URL, the view then changes to display the details of ...

The transition from material-ui v3 to v4 results in a redux form Field component error stating 'invalid prop component.'

Since upgrading from material-ui v3 to v4, I am encountering an error with all my <Field> components that have the component prop. Error: Warning: Failed prop type: Invalid prop component supplied to Field. The Field component is imported from im ...

React JS Troubleshooting: Toggling Problems

Whenever I click on an h2 element, the text that is supposed to be hidden for other elements is also showing const [show, setShow] = useState(false); <div> <h2 key={1} onClick={() => setShow(!show)}> What is Netflix ? ...

Create buttons to increase or decrease values using Bootstrap and JavaScript

What is the proper way to make this button function properly? I tested adding this line of javascript code, however it prompts an alert without clicking on the buttons as well. document.querySelector(".btnminus").addEventListener(onclick,ale ...

What is the best method to update the content of one div with content from another page using AJAX?

Having trouble achieving smoother page loads? My goal is to utilize AJAX to specifically fetch a certain div from another page and then swap out the content of a div on this current page with the response. Below is my JavaScript script that uses AJAX to r ...

html td elements are breaking due to the application of ngFor

<table> <tr> <th>Date</th> <th>Products</th> </tr> <tr *ngFor="let x of orderdetails"> <td>{{x.orderdate}}</td> <td *ngFor="let y of x.orderproducts"> <span class="break">{{y}}</s ...

Adjust the height of the div element to match the screen height with AngularJS controller

Can someone please assist me in resolving this issue? I'm currently working on a div element that displays data (positioned on the left side of the screen). I want to add a scrollbar exclusively to this div. I managed to achieve this by using the fol ...

Encountered a problem while attempting to add the react-redux dependency

I've encountered an issue while trying to install the react-redux package on my create-react-app project. Despite attempting various solutions like deleting and reinstalling the node_modules folder, as well as installing with admin permissions, I am c ...

Stop jQuery from resetting the background image when using fadeOut()

Currently, I am using fadeIn and fadeOut functions with jQuery to create a fading effect. However, when the final fade out occurs, the entire CSS table fades out and the background image of the CSS body comes into view. Despite setting the background-posit ...

Is there an issue with the functionality of the number input type in HTML 5?

<form name="form" method="get" action="" > Number : <input type="number" name="num" id="num" min="1" max="5" required="required"/> <br/> Email : <input type="email" name="email" id="email" required="required"/> <br /> <in ...

There seems to be an issue with my React application that was built using Webpack 5 and compiled with TypeScript. The @tailwind directive is not functioning properly in the browser, and

As I embark on creating a fresh react application using Webpack 5, Tailwind CSS, and Typescript, I find myself at a crossroads. Despite piecing together various tutorials, I am struggling to configure the postcss-loader for Tailwind. While traditional .css ...

TypeError: Unable to execute products.map as a function

I'm encountering an issue where product.map is not functioning as expected, despite trying multiple fixes found online. Additionally, when I console.log(response.data), it shows a successful response. Using React version 7.0 constructor () { ...

Passing "this" to the context provider value in React

While experimenting with the useContext in a class component, I decided to create a basic React (Next.js) application. The app consists of a single button that invokes a function in the context to update the state and trigger a re-render of the home compon ...

What is the reason behind Firefox's disregard of CSS font-size for code tags within pre tags?

There seems to be a discrepancy in how different browsers on Mac OS X 10.11.4 handle font-size. Is this an issue with Firefox, a CSS bug, or am I missing something about CSS? Here's a JSFiddle where you can see the details. In a section like this: &l ...

Transitioning in CSS involves animating the changing of a CSS property over

My goal with CSS is to create a transition effect with a delay that behaves differently when entering and exiting. Specifically, I want a 1 second delay when an element enters, but no delay (0 seconds) when it exits. transition: width 0.3s ease-in 1s; tra ...

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...

Transform JSON data into React components using asynchronous AJAX requests

I'm facing an issue when trying to convert JSON data into React components using AJAX requests. The JSON file I am working with is located at "src/data/form-inputs.json". The structure of form-inputs.json is as follows: { "form_inputs": [ { ...

The sidebar remains concealed at all times within the HTML5UP prologue/Skeljs framework

Currently, I am using HTML5up Prologue with the skeljs framework at this link. In my design, I prefer to keep my menu navigation hidden on the left side, especially in the narrow view (<961pixels). The toggle div should always remain visible. For refer ...

What is the reason behind the lack of collapsing in an inline-block container that only contains floated items?

Within this design, there are 3 boxes arranged in a row using the float: left; property for each one. These boxes are contained within 2 other elements. Typically, these containers collapse due to the content being comprised of floated items. However, chan ...

Navigation bar in HTML positioned on the right side of the webpage

My goal is to have a navigation bar on the right side of the page, taking up 250px, while allowing the main content to naturally adjust its size based on the window dimensions. I do want the main content to appear before the navigation in the HTML structur ...