Encountering challenges with Angular in creating a dynamically responsive background

I'm struggling to make this website fully responsive and adapt to various screen resolutions. The background images I'm using are high-resolution, but they don't seem to cover the entire page.

CSS :

@media screen and (max-width: 600px) {
    .column {
        width: 100%;        
    }
}

.bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
    padding: 9px 90px;
    font-family: 'Karma', serif;

}

.col {
    padding-left:0px;
    padding-right: 0px;
}
.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}
.bg-left {

   height: 100%;
   width:100%;
   background-size:cover;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://trello-attachments.s3.amazonaws.com/5e555166a4c1786edb33758a/5e710c0ee0447d546d31664b/c01b769110cdb1569938e31df65c24d4/electric-car-1458836.jpg)


}

.bg-right {
    background-color: #5547A3;
    height: 100vh;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

HTML :

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');
</style>
<!------ Include the above in your HEAD tag ---------->

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-lg-8">
            <div class="bg bg-left">
                <h2></h2>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-4">
            <div class="bg bg-right">
            <h1 style="text-align:center;font-weight:bold">Membership Tiers</h1>
         <h2 style="text-align:center">____________________________________</h2> 
         <h2 style="text-align:center">Free</h2>
            <h5 style="text-align:center">Tier gets access to email updates, and basic pay-to-use charging functions.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Preferred</h2>
            <h5 style="text-align:center">Tier gets all above, and bump in priority over free. Continous use with no financial obligation.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Hero</h2>
            <h5 style="text-align:center">Tier gets all above, and bump(s) in priority over free and preferred. Basic level membership, monly/yearly payment plan that allows access to 10+ classes per month, 10 charges per month.</h5>
                        <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Superhero</h2>
            <h5 style="text-align:center">Tier is eligible for weeklyu discounts, and premier services at the center. Unlimited class access, unlimited charges per month, and complimentary evennt tickets. Charges about $50 USD per month.</h5>
                        <h2 style="text-align:center">____________________________________</h2>


            </div>
        </div>
    </div>
</div>

Answer №1

Your website design caught my attention! I noticed that most of the content has a colored background, while the background image is only visible in the parent of the h2 tag. If you transfer your background rules to the container-fluid class, it will cover the entire page. I also made some adjustments to remove extra padding on the col class to prevent horizontal overflow. I used a different sample image since I couldn't access your image from Trello. I hope these changes help improve your site! Check out this link for more details

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');
</style>
<!------ Include the above in your HEAD tag ---------->

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-lg-8">
            <div class="bg bg-left">
                <h2></h2>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-4">
            <div class="bg bg-right">
            <h1 style="text-align:center;font-weight:bold">Membership Tiers</h1>
         <h2 style="text-align:center">____________________________________</h2> 
         <h2 style="text-align:center">Free</h2>
            <h5 style="text-align:center">Tier gets access to email updates, and basic pay-to-use charging functions.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Preferred</h2>
            <h5 style="text-align:center">Tier gets all above, and bump in priority over free. Continuous use with no financial obligation.</h5>
            <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Hero</h2>
            <h5 style="text-align:center">Tier gets all above, and bump(s) in priority over free and preferred. Basic level membership, monthly/yearly payment plan that allows access to 10+ classes per month, 10 charges per month.</h5>
                        <h2 style="text-align:center">____________________________________</h2>
            <h2 
            style="text-align:center">Superhero</h2>
            <h5 style="text-align:center">Tier is eligible for weekly discounts, and premier services at the center. Unlimited class access, unlimited charges per month, and complimentary event tickets. Charges about $50 USD per month.</h5>
        <h2 style="text-align:center">____________________________________</h2>


            </div>
        </div>
    </div>
</div>

@media screen and (max-width: 600px) {
    .column {
        width: 100%;        
    }
}

.bg {
center;
    color: #FFFFFF;
/*     padding: 9px 90px; */
    font-family: 'Karma', serif;

}

.col {
    padding-left:0px;
    padding-right: 0px;
}
.container-fluid {
    border: 1px solid red;
    padding-left: 0px;
    padding-right: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-size: 100%;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://wallpapercave.com/wp/wp2555019.jpg);  
  background-color: blue;
}
.bg-left {

   height: 100%;
   width:100%;
/*    background-size:cover;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://trello-attachments.s3.amazonaws.com/5e555166a4c1786edb33758a/5e710c0ee0447d546d31664b/c01b769110cdb1569938e31df65c24d4/electric-car-1458836.jpg) */


}

.bg-right {
/*     background-color: #5547A3; */
    height: 100vh;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

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 text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

Ensure the clarity tabs labels have the padding-left CSS property added

In my project, there are 2 clarity tabs (you can view the StackBlitz reference here). https://i.sstatic.net/jhLcn.png I want to apply the padding-left property specifically to Tab1 (the tab label itself, not the content) in order to create some space aro ...

turn the cube shape into one with smooth, rounded corners

Does anyone know how to create a cube with rounded corners using three.js? I've heard it's not possible with CSS. Any guidance on how to achieve this? Check out this link for an example /* |------------------------------------------| | MelonHTM ...

What causes the error message "Why does Angular 10 display the error 'Cannot set properties of undefined...'" to pop up?

I'm currently developing an application that allows users to sign up by providing information such as their name, nickname, password, and type of identification. Here is the user model: export class User{ id: string; name: string; nicknam ...

Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...

Utilizing Angular HTTP Interceptor to Show Loading Spinner Across Multiple Modules

My goal is to utilize the ng4-loading-spinner spinner when making HTTP calls to my API. I referred to the examples provided in the following resources: Angular Guide on Intercepting HTTP Requests/Responses Stack Overflow Post on Using HttpClient Interce ...

What is the reason behind loading two srcset images?

When it comes to creating responsive web templates, I make use of the srcset attribute in order to load different images based on the current viewport size. This has been working well overall. However, in production mode, the images are fetched from a Digi ...

Setting up the viewport addon in Angular can be done by following these steps

After checking this documentation, I attempted to add a custom viewport in the config.js file: import { setParameters } from '@storybook/angular'; // switching from react to angular import { INITIAL_VIEWPORTS } from '@storybook/addon-viewpo ...

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

Differences in <img> sizing behavior between Chrome and Firefox

Objective: Develop a scrollable image-gallery web component with layouting that functions without script intervention. Specifications: The size of the web component must be fully responsive and/or adjustable. The top main area of the widget is the galle ...

Different ways to rearrange the placement of Export buttons in a personalized div or outside the table using Datatable

I would like to display the export buttons outside of the table. While searching on stackoverflow, I came across an example that uses the Select options method. You can find the example here. If anyone knows how to achieve this, please modify it and shar ...

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

Tips on showcasing the elements within a div container using flexbox

Seeking advice on positioning items/cards using flexbox in my initial react app. The issue lies with the div within my card component where applying display: flex; turns every card into a block (column-like) structure, flexing only the content within each ...

What causes BehaviorSubjects in Angular RXJS to emit multiple values?

click here to see the image descriptionUsing BehaviorSubject for sharing data between components in my app has led to a performance problem caused by multiple emissions of the same value. For example, when I make an HTTP call to fetch a team object from th ...

Ways to deactivate the submit button using Cookies, sessions, or local storage

Although cookies and storage can be deleted, they can still help prevent many human spammers who are unaware of this. How can I temporarily disable the form submit button on a specific page for just one day? I want to create a code that saves "Submitted" ...

Using Rxjs to reset an observable with combineLatest

My scenario involves 4 different observables being combined using "combineLatest". I am looking for a way to reset the value of observable 2 if observables 1, 3, or 4 emit a value. Is this possible? Thank you! Mat-table sort change event (Sort class) Mat- ...

Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this wit ...

Curved Edges Ensure Non-Interactive Elements

element, there is a query about utilizing a color wheel from a repository on GitHub. The goal is to disable any actions when clicking outside of the canvas border radius in this color wheel. Various steps need to be taken to prevent unwanted outcomes: - S ...

Issue with mouseover in the jQuery area

As I navigate through a WordPress website, I am attempting to create a mandala using dynamic images. Utilizing jQuery and CSS areas, I aim to display the corresponding image when hovering over a specific section. However, I am facing an issue where there ...