Excessive whitespace appearing on the right and bottom edges of the Angular application

I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom after the footer when viewed on a mobile device. I've tried adjusting the components to take up the full viewport width, but it's causing distortion in the animation of the page. No matter what I try, the space after the footer remains. You can view my project on GitHub here. Below, I've included a screenshot and the code for my footer component: https://i.sstatic.net/Z9Zin.png

footer.html:

<footer id="footer" class="footer-1 area">
  <div class="main-footer widgets-dark typo-light">
  <div class="container">
  <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
  <div class="widget subscribe no-box">
  <h5 class="widget-title"><img src="assets/images/logo.png" width="50" height="40" alt="LOGO" >WEBBNET DIGITAL<span></span></h5>
  <p>KOLKATA - 700064</p>
  </div></div>
  <div class="col-xs-12 col-sm-6 col-md-4 footer-top">
  <div class="widget no-box">
  <h5 class="widget-title">Get Started<span></span></h5>
  <p>SEND IN A QUERY</p>
  <a class="btn" #myModal (click)="openModal()">Register Now</a>
  </div></div>
  <div class="col-xs-12 col-sm-6 col-md-4 footer-top">
  <div class="widget no-box">
  <h5 class="widget-title">Contact Us<span></span></h5>
  <p><a href="mailto:" title="glorythemes">support</a></p>
  <ul class="social-footer2">
  <li class=""><a href="https://www.facebook.com/webbnetdigital/" target="_blank" title="Facebook"><img alt="Facebook" width="30" height="30" src="data:image/png;base64></a></li>
  <li class=""><a href="https://twitter.com" target="_blank" title="Twitter"><img alt="Twitter" width="30" height="30" src="data:image/png></a></li>
  <li class=""><a title="instagram" target="_blank" href="https://www.instagram.com/webbnetdigital/"><img alt="instagram" width="30" height="30" src="data:image/png;></a></li>
  <li class=""><a title="linkedin" target="_blank" href="https://www.linkedin.com/company/webbnet-digital/"><img alt="linkedin" width="30" height="30" src="data:image/png;base64></a></li></ul></div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="row"><div class="col-md-12 text-center">
  <p>Copyright</p></div></div></div></div>
  <ul class="circles">
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></footer>

footer.css:


/* Main Footer */
footer .main-footer{    padding: 20px 0; z-index: 1;}
footer ul{  padding-left: 0;    list-style: none;}

/* Copy Right Footer */
.footer-copyright { background: #222;   padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {  list-style: none;   margin: 0;  padding: 0;}
.footer-copyright nav ul li {   border-left: 1px solid #505050; display: inline-block;  line-height: 12px;  margin: 0;  padding: 0 8px;}
.footer-copyright nav ul li a{  color: #969696;}
.footer-copyright nav ul li:first-child {   border: medium none;    padding-left: 0;}
.footer-copyright p {   color: #969696; margin: 2px 0 0;}

/* Footer Top */
.footer-top{    padding-bottom: 30px;   margin-bottom: 30px;    border-bottom: 3px solid #222;}
/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{    background: transparent;}
footer.transparent .footer-copyright{   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}
/* Footer light */
footer.light .footer-top{   background: #f9f9f9;}
footer.light .main-footer{  background: #f9f9f9;}
footer.light .footer-copyright{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}
/* Footer 4 */
.footer- .logo {    display: inline-block;}
/*==================== 
    Widgets 
====================== */
.widget{    padding: 20px;  margin-bottom: 40px;}
.widget.widget-last{    margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent;  margin-bottom: 40px;
    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{    margin-bottom: 18px;}
.widget li a{   color: #de6b28;}
.widget li a:hover{ color: #233B66;}
... (omitting rest of CSS)

Answer №1

After examining your repository, it was determined that the issue causing the white space problem is the ul element with the id circles.

To resolve this, simply include margin: 0 in that element's styling and the white space will be eliminated.

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

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

Creating a horizontal scrollbar in columns using Bootstrap can be accomplished by adjusting the CSS properties

Having a container created with boostrap: https://i.sstatic.net/bqAuf.png The question at hand is how to implement horizontal scrolling in order to maintain the aspect ratio of the initial image within the container on phone resolutions. Here is the con ...

The Bootstrap navigation bar isn't displaying properly on mobile devices

Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...

The scrollbar is shifting the page's content towards the left

As a first-time user of Bootstrap, I have encountered an issue while building my website that I cannot seem to solve. Whenever I add large content that requires a scrollbar in the browser, the entire page shifts to the left. In simpler terms, when a scrol ...

Angular 7 SPA encountering Media Type Not Supported 415 issue when communicating with .NET, despite successful request in Postman

My SPA is encountering a 415 Unsupported Media Type Error when it calls a specific endpoint in my .NET API that I recently implemented pagination for. Interestingly, the same call from Postman is successful without any errors. It's puzzling why the id ...

Clickable table cell with interactive space extending below the text

This adaptation was inspired by the response of James Donnelly to a query about how to create a clickable link in a TD element. While his solution is effective in many cases, I encountered a scenario where it falls short. To illustrate this issue, here is ...

What could be causing my form not to Submit when attempting submission without utilizing the submit button?

Here is the code for my validation: $(function () { function validateForm() { // Code to validate form inputs } $('#myform').submit(validateForm); }); After this, I want to submit the form when a certain action occurs: < ...

When the text starts to overlap the column completely at approximately 700 pixels wide

Previously, everything was working fine until it suddenly broke. The column system switches to a 100% width single column at 1500px, but for some reason, the text overflows off the screen around 700px and I can't figure out why. The text at the bottom ...

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

As someone who is still learning about web development, I find myself struggling with browser compatibility issues. It's frustrating to see my website looking different in Chrome compared to Safari. While I know that browsers interpret code differentl ...

There was an error in calculating the Foundation 5 - 1170 grid

Currently, I am in the process of learning Foundation 5 and working on an app that utilizes a 1170 grid system. The app has 70px columns and 30px gutters (which equals to 1170 when calculated as 70 * 12 + 30 * 11). However, after setting the default values ...

Seeking ways to ensure my component maximizes available space using Tailwind CSS

I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow- ...

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

After initiating a fresh Rails 7 app, I utilized the command line syntax: $ rails new app_name --css=bootstrap An error occurred during app creation specifically when including --css=bootstrap: Install esbuild run yarn add esbuild from ".& ...

swap out an element in an array with an extra element

My array contains elements with both id and des properties. I would like to add an additional property like value:0 to each object in the array. I achieved this using a loop. let data = [ { "id": 1001, "des": "aaa" }, { ...

Is it possible to stack images on top of each other on a webpage?

I'm looking to create a dress-up game website where users can click on different accessories to layer them on top of each other. It's a bit tricky to explain, but I've found some examples that demonstrate what I have in mind: This site is ...

Issues with getting full HTML content using selenium for web scraping

My task is to extract the discounted price of a product from a specific website. Upon inspecting the website, I found the following HTML structure: https://i.sstatic.net/LerWE.png This is what my code currently looks like: browser = webdriver.Chrome(exe ...

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

The Dilemma of jQuery Dragging and Resizing Clash

I have implemented the Gridster Plugin() in my project. I discovered an updated demo on Github which includes resizable functionality. To ensure compatibility with future items, I have also integrated the jQuery livequery plugin. However, I am facing an i ...

Creating custom components that encapsulate the functionality of Angular Material tabs component

I am aiming to incorporate the Angular Material tabs component within my shared components. Here is the component I'm attempting to wrap: Note: Each tab can display a component: <mat-tab-group> <mat-tab label="First"> Content ...

Guidelines on transforming XML files into HTML tables using C++ programming language

Is there a C++ library available that can help me convert an XML file into an HTML table using my C++ application? For example: <breakfast_menu> <food> <name>Belgian Waffles</name> <price>$5.95</price> <d ...

Drifting my dropdown menu bar through the digital sea

I'm having trouble with my navigation bar and I need help styling it. I want the navigation bar to have a dropdown menu when the user hovers over the top level of the navigation bar. The issue I am facing is that the second level of the navigation bar ...