Mobile version shows white spaces when using particles.js and bootstrap 4.6

This is how I implement particles.js:

    <div id="particles-js"></div>
@RenderSection("Header", required: false)
<main role="main" class="container">
    @RenderBody()
</main>
<script>
    particlesJS.load('particles-js', '/Scripts/Custom/particles.json', function () {
        console.log('callback - particles.js config loaded');
    });
</script>

In the mobile version, I am encountering this issue: https://i.stack.imgur.com/5UXHl.jpg

Please advise me on how to resolve this without any additional tags or elements causing white space.

cssasp.netuser-interfaceparticles.js

Answer №1

This particular solution is the one I found for my issue.

#particles-js{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

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

An easy way to incorporate an image into an HTML button

Is there a way to add an image on a button? I've been attempting to create a banner-like element for a large button, but the image doesn't seem to integrate inside the button as desired. I aim to have the image contained within the button witho ...

htmlcss

The input box refuses to accept any typed characters

I encountered a strange issue where the input box in the HTML was not allowing me to type anything. const para = document.createElement('p') const innerCard = document.getElementsByClassName('attach') for(let i = 0; i < innerCard.l ...

javascripthtmlcss

Strange glitches and slow loading problems plaguing website. (GoDaddy)

TackEmporium.com Lately, I have been revamping my website, which was originally given to me by a friend. I have been making slight adjustments to update its appearance while keeping its classic look with enhanced resolution and cleaned-up HTML5 code. Rec ...

javascripthtmlcss

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

javascriptcssreactjsjss

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs. If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz ...

jqueryhtmlcssjquery-animatecss-float

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

javascriptjqueryhtmlcsslayout

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

javacssjavafx

Ensure the content spans the full width of the container without displaying an overflow scrollbar by using the "position: absolute

I'm looking to create a small red div that spans the full width at a fixed top position within another div that has an overflow scroll property. I've provided a jsFiddle link for reference: http://jsfiddle.net/mCYLm/2/. The problem arises when t ...

cssgoogle-chromeoverflowcss-position

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

The background refuses to cooperate, soaring upward only to be abruptly sliced in two

I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...

htmlcssbackgroundbackground-image

flexbox wrapping text styling

Can text be wrapped in flex within a fixed width container? For example: img username added you as a friend Instead of: user added img name you as a friend I am able to achieve this if the image and 'a' were separat ...

cssflexbox

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

What causes the disruption of vertical alignment among inline-block elements when using overflow:hidden?

Take a look at these two JSFiddles: http://jsfiddle.net/am28dsbz http://jsfiddle.net/am28dsbz/1/ Why is it that the first one shows my text aligned correctly, while the second one displays the first link lower than the second? Stack Overflow requires m ...

css

"Simultaneously updating the UpdatePanel, triggering a JavaScript postback, and modifying the querystring in a SharePoint Search

Struggling with a tricky issue here. Let me try to clarify: I have a SharePoint results page where I'm using a Search Results Core WebPart. Now, I want to modify the parameter in the querystring upon postback so that the WebPart displays different re ...

.netasp.netjavascriptajaxsharepoint

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

Tips for Creating a Responsive Homepage

I'm new to CSS and trying to create a responsive design for mobile IE. Currently, the page appears blank on IE but works fine on Google Chrome and other browsers :-) Here are the code snippets I have used: HTML: <div class="main"> <div ...

htmlcss

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="display:none"> The table's new ...

javascriptjqueryhtmlcss

"I recently started using Protractor and as per company policy, I am unable to utilize XPath. I am facing difficulties with the code below and would greatly appreciate any insights or assistance provided

I am looking for guidance on how to write automation test scripts for a small AngularJs application using the cucumber-protractor-typescript framework. As someone new to Angular applications, I am particularly concerned about creating reliable locators. B ...

csscss-selectorsui-automation

Setting font sizes using CSS values according to the Shadow DOM root element

Summary of the problem: I am searching for a method to establish font size values based on an element inside a shadow dom relative to the shadow host, regardless of the parent element's font size within the shadow dom. I am looking for a solution sim ...

htmlcssdomweb-component