The mat card doesn't quite align with the rest of the page

I am currently utilizing Angular Material and Bootstrap in my project.

My aim is to display a mat-card that fits perfectly on all screen sizes.

However, I am encountering empty spaces on the right side of the card.

While it fits properly on some screen resolutions, there are issues with others. Can anyone provide guidance on how to address this?

Check out my demo on StacKblitz: demo

I have attached screenshots showing the empty space below:

https://i.sstatic.net/c6lOW.png

Please see the mobile view screenshot here: https://i.sstatic.net/vnlQv.png

It works correctly on screens with the following resolution: https://i.sstatic.net/SEFKd.png

htmlcssangularbootstrap-4

Answer №2

Utilize the power of flex layout by inserting mat cards within the flex layout containers.

<div fxLayout="row wrap">
  <div fxFlex="25%" *ngFor="">
  </div>
</div>

The fxFlex attribute set to "25%" ensures that each row contains 4 mat cards.

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

"Creating a 2-column layout for an unordered list using CSS Flex

After spending far too much time at work today pondering this issue, I've decided to turn to the collective wisdom of the internet. My dilemma involves a standard <ul> containing multiple <li> elements (currently 12, but this number could ...

htmlcssflexboxcss-grid

Toggle between fading in and out by clicking the button using a div

I'm having trouble getting my fade menu div to work properly. I want it to fade in when the menu button is clicked and fade out when the menu button is clicked again. Despite following various tutorials and researching other questions, I can't se ...

javascriptjqueryhtml

Resolving Conflicting CSS Styles

It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...

htmlcss

What is the best way to implement a condition within an ngFor loop in Angular?

I am looking to iterate the user list with a condition. <li *ngFor="let user of users" *ngIf="user.age>25"> {{user.name}} </li> I understand that this code is incorrect. However, I would like to achieve something similar. Is there any way ...

angulartypescript

Retrieving data from an HTML input tag and storing it in a variable

I'm currently working on a project that involves reading the contents of an uploaded file through an input tag and storing it in a variable. My goal is to then use an algorithm to decrypt the .txt file: <input type="button" value="decrypt" id="dec ...

javascripthtmljqueryhtml-input

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

cssgoogle-fonts

Converting CSS specific to a particular vendor: A step-by-step

Looking for a method to adapt a CSS file containing only -moz-css-property references to include compatibility with Chrome, Safari, and other browsers. Ideally seeking a user-friendly web application that can perform this task seamlessly. ...

css

Whenever the [required] tag switches from being true to false, it generates an event

Initially, I have set up an Angular form using the following code snippet buildForm() { this.form = this.formBuilder.group({ value1: this.formBuilder.control(null), value2: this.formBuilder.control(false) }); } The HTML contains a ...

htmlangularforms

Tips on relocating a button in a column located within a table header

Is there a way to adjust the positioning of the buttons in a thead to align with a colored border below it? <table> <thead> <!-- table extra buttons --> <tr style="border-bottom-style: solid; border-bottom-color: #FFE84D; ...

htmlbootstrap-4

Get the large data file in sections

I ran a test script that looks like this: async function testDownload() { try{ var urls = ['https://localhost:54373/analyzer/test1','https://localhost:54373/analyzer/test2'] var fullFile = new Blob(); for (le ...

javascripthtml

The fixed div is overshadowed by the relative divs with a higher z-index

Hey there, check out my HTML snippet below: <body> <div class="relative1"> <div class="fixed1"> </div> </div> <div class="relative2"> </div> </body> Here's the corresponding CSS: ...

htmlcss

Angular2: I'm looking to customize the HTML structure for the login page and home page

There are two key elements that I need to address in my ng2 project I am looking to create distinct HTML structures for the login page and home page. Currently, my router-outlet in the app module is enclosed in a template HTML structure. However, I w ...

angulartypescriptsingle-page-application

Unable to select multiple checkboxes as they are unresponsive and not registering any clicks

I am facing an issue with rendering multiple checkboxes in a grid cell. I attempted to use formly multicheckbox, but unfortunately the checkboxes did not render properly. So I decided to try a different approach, however, now the checkboxes are not being c ...

angularuser-interfacecheckboxcheckboxlist

Conceal a division based on its numerical position

I'm having trouble figuring out how to hide multiple divs based on an index that I receive. The code snippet below hides only the first div with the id "medicalCard", but there could be more than one div with this id. document.getElementById("medical ...

javascripthtmlangulartypescript

Header image misalignment

Seeking a solution to have the image fill up the remaining space in the .container class I attempted setting the width of the image in CSS to width: 100%, but encountered two different results: Image with attribute set: https://ibb.co/9yKJgvF If I remove ...

htmlcss

Placing a group of input fields and a button based on the data-id attribute of the element

I have a form that appears when a button is clicked, and the save button saves input values into an object. Is there a more efficient way to write this function if I need to create 9 more buttons with different data-id attributes (e.g. data-id="2" and so ...

javascriptjqueryhtml

Problem with the `file` input not working properly

Currently, I am working on creating a form with two input fields - one for text and the other for file upload. However, the issue I am facing is that the Browse button for the file input is being displayed inside the input box. My goal is to have the butto ...

htmlformstwitter-bootstrapcssfile-upload

A vertical scroll bar should be created specifically for a div within a dialog box in

I am working on a jQuery dialog that contains three divs. I want the middle div to have a vertical scroll bar when its content exceeds its height. The first div (top) should remain fixed at the top of the dialog box, and the third div (lower) should stay f ...

jqueryhtmldialogscrollbar

Ways to enhance a browser's response with soup

I have a script that sends multiple requests to a website using RoboBrowser and retrieves responses, but now I need to filter these responses to exclude any containing the phrase "Case Status Not Available". I attempted to use Beautiful Soup for this purpo ...

htmlpython-2.7beautifulsouprobobrowser

How can I navigate to a specific section within a Bootstrap modal without being redirected back to the origin of the modal?

Currently in the process of creating a basic front end website with Bootstrap for styling. One section I've developed includes modals, where users click a button to open a centrally located modal window. Desired Functionality I aim to enable users t ...

htmljquerycsstwitter-bootstrapbootstrap-4