Ensuring the height of the body and content div in Bootstrap 4 combined with Angular set to

Is there a way to center the <div class="card"> in the middle of the page or body? It works perfectly on a desktop browser, but on mobile view, it's not aligning properly. How can I center it using...

html, body {
  height: 100%;
  background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}

and

h-100,

align-items-center h-100

<div class="container h-100">
  <div class="row align-items-center h-100 pt-5 pb-5">
    <form class="col-12 wow fadeInUp " data-wow-delay="0.2s">
      <div class="card"> 
       ...
      </div>
    </form>
  </div>
</div>

It works perfectly on a desktop browserhttps://i.sstatic.net/BbARQ.png

but in mobile view, the form is cut off from the top and bottom and the background repeats while scrolling

https://i.sstatic.net/0cytF.png

htmlcssangularbootstrap-4

Answer №1

To avoid your form getting cut off, simply include display:table or display:grid in the parent .container element:

<div class="container h-100 "style="display:grid">...</div>
or: 
<div class="container h-100 d-table">...</div>

If you're experiencing issues with a linear-gradient repeating when scrolling on the body, ensure that both your html and body elements occupy the entire page:

body {
  min-height: 100%;
  overflow: auto;
}

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

"NameService is not provided in Angular, please check your module

I've been struggling with loading a class into my Angular component. I've spent quite some time trying to figure out the solution, even attempting to consolidate everything into a single file. Here is what I have: Application.ts /// <referenc ...

typescriptangularsystemjs

What is the reason for encountering the error message "Property 'floatThead' does not exist on type 'JQuery<any>' when trying to use floatThead in Angular/TypeScript?

For my project, I am incorporating the third-party jQuery library called https://github.com/mkoryak/floatThead. To work with Bootstrap and jQuery, I have installed them using NPM through the command line. Additionally, I have used NPM to install floatThea ...

jqueryangulartypescriptdomnpm

Enter a keyword in the search bar to find what you're looking

I am working on a form where users can select their occupation from a list that is stored in a separate .js file. The list includes various occupations like 'AA Patrolman' and 'Abattoir Inspector'. var occupationSelect = "<select id ...

javascripthtmlinput

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

javascriptjquerycss

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...

javahtmlcssselenium

Chrome browser is not reachable due to a web driver error when running tests with the Protractor

Dealing with issues in Protractor end-to-end testing environments can be quite common. Despite searching extensively, I have yet to find a satisfactory solution for my specific problem. I am currently using the Protractor framework with the Jasmine test ru ...

angularselenium-webdriverjasmineprotractorselenium-chromedriver

The React component is not appearing in Internet Explorer 11

When using a React directive, I invoke it like this: <react-component name="StartAll" props="ctrl.props"> </react-component> Everything works fine in Chrome, Firefox, and Opera, but in IE 11, the React component does not display at all. There ...

htmlreactjs

Apply a class to each element that contains the specified name attribute

I have successfully implemented a prices tab on the top of my page, with tabs for different packages at the bottom. When a user selects a certain package, only specific items from the list are visible while the others are hidden. I managed to streamline ...

javascriptjqueryhtmlcss

Tips on removing pesky favicons

Not too long ago, I purchased a domain and configured it with Wordpress. Eventually, I decided to switch to a static landing page so I uninstalled Wordpress. But now there's an unfamiliar favicon that has appeared on my site. Even after deleting all ...

htmlwordpress

Is it possible to utilize Vue's v-for function without the need for ul or ol elements?

Hey there, I'm just starting out with Vue and I'm looking to display some data in rows without using numbers or bullet points. Is there a different way to achieve this without the current approach I have below? <li v-for="product in contract. ...

vue.jsbootstrap-4v-for

The image source is not functioning properly to display the image, even though it is working perfectly on

I'm currently attempting to retrieve an image from Instagram. Everything seems to be in order with the image link on Instagram. However, when I try to use it within an img tag, it fails to fetch. One thing worth noting is that this particular image d ...

htmlcssimagesrc

Easy steps to dynamically add buttons to a div

I need help with a JavaScript problem. I have an array of text that generates buttons and I want to add these generated buttons to a specific div element instead of the body. <script> //let list = ["A","B","C"]; let list = JSON.p ...

javascripthtml

Importing for the purpose of minimizing and combining CSS files is not functioning as expected in conjunction with the h5bp

After configuring my main.css to import two style sheets using the @import rule, I ran into an issue. The H5BP build script minified and concatenated the main.css, but the imported files were missing. I double-checked the build script's config to ens ...

cssbuildhtml5boilerplate

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...

pythoncssjsonweb-scrapingscrapy

Animation in CSS3: Blinking overlay block

I am interested in creating an element that will overlay a section of a webpage using position: absolute. The element should be 50% opaque and blink between red and transparent, similar to the way OSX used to do with default dialog buttons. Is there a way ...

htmlanimationcssbackground

Refreshing data causes the data to accumulate and duplicate using the .append function in Jquery

I am currently working with a dynamic table that is being populated using AJAX and jQuery. Everything seems to be functioning correctly, however, I am encountering an issue when trying to reload the data as it just continues to stack up. Below is the func ...

javascriptjqueryhtmlajax

Issue with CRUD functionality: The edit function is not functioning properly, as it does not reflect any changes on the

After attempting to implement an edit method in PHP for CRUD, I encountered an issue. When I click the edit button to execute the query, it redirects me to the show all page without making any changes. {<!doctype html> <?php include 'db. ...

phphtml

Error Message: "Unable to locate module for Angular 5 UI Components packaging"

In the process of developing UI Components to be used in various web projects throughout the company, we are aiming to publish these components as an npm package on our local repository. It is crucial for us to include the sources for debugging purposes. F ...

angulartypescriptnpmes6-modules

I'm experiencing issues with event.preventDefault() not functioning properly when used within a contenteditable div

I'm currently working with some basic Angular 7.x code that involves a contenteditable div. I'm attempting to prevent the default action when a user hits the [ENTER] key, but no matter what I do, it still moves the cursor to the next line. What a ...

javascriptangulardom-eventskeyup

Issue with Angular 4 material: md-slider experiencing jerky sliding motion

In my Angular 4 application, I have implemented material design components using angular-cli. One specific component I am using is a md-slider. Although most of the functionality works correctly, there is an issue where the cursor does not move when the u ...

angularangular-material2