Angular responsive button

Currently, I am working on an application using angular 8. In the app, there is a form that includes several buttons. I am looking for a solution to make these buttons responsive on mobile devices when viewed in Chrome and Firefox browsers. Here is the current setup:

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

Here is the code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row justify-content-around">
  <button (click)="register()" class="btn btn-outline-primary col-4"> Submiiiiiiiiit </button>
  <button type="submit" class="btn btn-primary col-4"> Validate </button>
</div>

The first button appears misaligned while the second button looks fine. It seems like the text length might be causing the issue.

Any suggestions or guidance would be greatly appreciated. Thank you.

htmlcssangulartwitter-bootstrap

Answer №1

Try using the unit vw for font sizes, as they are relative to 1% of the viewport width.

Take a look at this example code snippet:

.title {
    font-size: 4vw;
}

You can also check out a live demo here

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

Tips for interpreting Json data received from a WCF service in HTML with the help of AJAX technology?

Can anyone assist me with retrieving data details from a JSON model? I am utilizing a WCF service that returns JSON data and it works fine as I have tested it using WebClient. However, I am having trouble displaying the data on my HTML site. Despite trying ...

c#htmlajaxjsonwcf

Having trouble with JavaScript/JQuery not functioning properly in HTML content loaded using the load() method

My goal is to load an input form from a separate file called new_machine.php into my index.php. This form includes an input with a dropdown that retrieves options from a MySQL database and displays them as anchors. The issue arises when I attempt to manipu ...

javascriptphpjqueryhtmlajax

Strategies for navigating dynamic references in Angular 2 components

I am working with elements inside an ngFor loop. Each element is given a reference like #f{{floor}}b. The variable floor is used for this reference. My goal is to pass these elements to a function. Here is the code snippet: <button #f{{floor}}b (click) ...

javascriptangulartypescript

Creating text on a background image that does not adapt to different screen sizes is

How can I ensure that the text I write on an image stays within the image boundaries on small screen devices for full responsiveness? I've tried setting the image as the background of my div element, but the text overflows. Here is the code I used: ...

htmlcssbootstrap-4

Prevent form clearing by implementing input validation

While working on setting up a sign-up form, I encountered an issue where I needed to validate whether the information entered already existed in the database. The code itself is functioning properly and can successfully detect if any existing data is foun ...

javascriptphphtml

Adjust the border color of the <input> element when it is clicked on

I'm currently working on a login screen for my next.js application and I've encountered an issue where the border color changes to a mixture of white and blue when I select an input field. https://i.stack.imgur.com/R2yKa.png I attempted to reso ...

htmlcssnext.js

Show the navigation bar only when the user is logged in using Angular 6

Utilizing JWT for authentication, I have implemented a condition to display the navigation menu for logged-in users. <app-nav *ngIf="currentUser"></app-nav> <router-outlet></router-outlet> The issue arises after logging in when th ...

angularangular6

Create a loop in JavaScript to iterate through elements using both a while loop and the

I have a JSON object (returned by the server) and I am looking to iterate through it with either a while loop or forEach method in order to display the products in a shopping cart. The name of my object is response2, which contains the cart products. I w ...

javascripthtmlmysqlnode.js

Verify whether a div element is styled in a specific manner

Upon initial load of my website, if the page is maximized or in fullscreen mode, the comBrand div will have specific CSS properties applied. However, during a resize event, I use the .css() function to adjust the properties of this element so it doesn&apos ...

javascriptjqueryhtmlcss

The outline of a box with the title "CSS, FrontEnd Dev - UX" is a key

Struggling with UX design here. Working on an app in React with Material UI, aiming for a look similar to this: https://i.sstatic.net/h1alm.png My goal is to make the "Some Title" section dynamic from my database, along with the contents. Can't seem ...

cssuser-interfacegraphicsmaterial-uiuser-experience

Looking to recreate this style of table using HTML and CSS?

https://i.sstatic.net/nDrxq.png Trying to replicate the layout from this image for my blog, but struggling with the source code. Any suggestions on how to achieve a similar design without using divs within table rows? Looking for a cleaner solution. ...

htmlcssjekyllblogs

Can anyone advise on setting up my blog using HTML5 without the need for a database or SQL?

I am currently working on building a blog for my HTML5 website. I have managed to create a comment form, but I'm unsure how to allow users to actually post comments on the posts. Currently, I have the comment and likes counters fixed in place as place ...

htmlcommentsblogs

What are some different CSS options for setting the indentation of the first line of

I've encountered an issue with how the <p> text-indent property appears when a page is printed using Internet Explorer's Active-X plugin. Here is the relevant CSS: p { font-family: Calibri; font-size: 20pt; line-height: 1.75em; margin-bot ...

htmlcss

Testing for Equality of Two Fields in Angular and Ionic: A Step-by-Step Guide

I am trying to validate if the values of two fields are the same. These fields need to be passed as parameters to the validation function. I am facing an issue where the function is unable to retrieve the value of the field and it returns null. How can I d ...

angularionic-frameworkionic3

Differences between CSS property `transform` and `position: absolute`

Can you explain the distinction between position: absolute; top: 50%; left: 50%; and transform: translate(-50%, -50%); What are the advantages of one over the other? ...

css

Troubleshooting issues with Bootstrap Accordion functionality within a React environment

After copying and pasting the Accordion code directly from Bootstrap, I'm facing an issue where the style is not consistent and the functionality isn't working as expected. Snippet from About.js: import React, { useState } from 'react' ...

htmlreactjsbootstrap-4accordionbootstrap-accordion

Creating a well-structured HTML layout following the BEM Methodology

I'm unsure about this HTML structure. Does it follow the BEM approach correctly? <div class="boxWithBorder"> <div class="header"> <h2 class="boxWithBorder__element"></h2> </div> </div> In my opinion, it sh ...

htmlbem

What steps can be taken to ensure that an element does not exceed the boundaries of its grandparent container?

I am facing a unique scenario where I have a div with dynamic content, and inside it is another div containing a growing list. The challenge is to allow the internal div to expand until the root div reaches its maximum height, after which overflow should ...

htmlcss

Improving the way text entered in an input box is displayed using HTML table cells

Seeking advice on how to display the last two input boxes in a dynamic HTML table so that users can easily view the data they have entered. The issue arises when the length of the data in these columns is large, making it difficult for users to see all the ...

javascriptjqueryhtmlcss

The HTML code on the page does not match the code I see when inspecting it

I need to extract the cost savings and frequency of interruptions information from the table on https://aws.amazon.com/ec2/spot/instance-advisor/ using Python. After inspecting the website using Chrome's 'Inspect' feature, I discovered that ...

pythonhtmlpython-3.xweb-scraping