Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet.

<button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>

Here is the CSS Code:

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  height: 35px;
  width: 200px;
  font-size: large;
  margin: 35px 0 0;
  padding: 25px 100px;
  font-weight: 700;
  border-radius: 10px;
}
cssangularresponsive-designbootstrap-5

Answer №1

To make your design responsive, you can utilize media queries like in the code snippet below:

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  height: auto;
  max-width: 300px;
  font-size: large;
  margin: 35px 0 0;
  padding: 25px 100px;
  font-weight: 700;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  #btnLogin1 {
    height: auto;
    max-width: 200px;
    padding: 25px 50px;
  }
}
<button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>

Answer №2

Consider trying out the vmin or vmax units in your CSS. If you prefer not to use media queries, experiment with different values until you find the perfect fit for your design. For a detailed explanation of how these units function, take a look at this informative blog post: CSS Units

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

Changing Observable to Promise in Angular 2

Q) What is the best way to convert an observable into a promise for easy handling with .then(...)? The code snippet below showcases my current method that I am looking to transform into a promise: this._APIService.getAssetTypes().subscribe( assetty ...

typescriptangularpromiseobservable

Having trouble installing npm packages due to an error

As I attempt to install my npm packages, a frustrating error occurs. What steps should I take to resolve this issue? npm ERR! code EINVALIDTYPE npm ERR! typeerror Error: Argument #5: Expected object but got string npm ERR! typeerror at inflatableChild ...

angularnpm

Angular 2: Issue with Component not reinitializing when query parameters change

I am currently working with Angular 2 and the latest router component to create a search functionality. Upon clicking the search button for the first time, the router navigates to the search component and retrieves data from the service. However, I have no ...

angularjsangulartypescript

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

cssangulartypescriptionic-frameworksass

Ways to display collapse content and hide it again with a click

Working on my Angular 2 project, I have created collapsible tabs. When a button is clicked, the corresponding tab collapses, and I want it to be hidden if the same button is clicked again. However, the tabs are generated dynamically or through looping: Th ...

angularbootstrap-4tabs

Utilizing Material UI tabs panel with customized CSS styling

Having trouble changing colors and CSS in the TAB PANEL using material-ui. Any tips or suggestions? :( It seems like useStyle and theme functions are not working as expected. I was able to modify other properties like scrollable, but colors seem to be fix ...

cssreactjsmaterial-uicss-tablesreact-css-modules

Updating the style of a CSS element using Python Selenium

Is it possible to change the css element style using Python Selenium during automation to increase the height of the page? The structure of the element in the HTML is as shown below: <div style="overflow-y:scroll;overflow-x:hidden;height:150px;&quo ...

pythonhtmlcssselenium

The Bootstrap navigation bar is experiencing functionality issues when viewed on Chrome mobile browsers

I'm currently testing out the bootstrap 3 navbar feature on my meteor application, but I'm encountering some issues specifically on mobile devices. The problem seems to be that the toggle button is not showing up as expected. Interestingly, it wo ...

javascripthtmlcsstwitter-bootstrapmeteor

Tips for properly aligning an image within an HTML iframe

I've been working on positioning an image inside an iframe, but so far my research hasn't yielded the results I need. Here's what my code looks like: The HTML <div class="modal-body description"> <div class="modal ...

htmlcssiframeposition

Unable to showcase dropdown options in Angular 5

I am currently diving into Angular 5 and following a tutorial. I encountered an issue while attempting to display drop down values in a form. The component.html code provided below is not showing the drop down values. Here's what I have tried so far. ...

angular

Tips for instructing Vimeo on the recommended video dimensions for responsive delivery

Embedding Vimeo's iframe in a responsive way is quite straightforward, allowing the player to adjust its size accordingly. However, the real question is: Does Vimeo actually deliver the video in the correct size? In the past, I mistakenly assumed th ...

htmlresponsive-designvimeo-player

PHP script not recognizing CSS styles

My coding dilemma involves a script that is supposed to display numbers from 1 to 100 in black font. For multiples of 3, it should show "Three" in green, and for multiples of 7, it should display "Seven" in blue instead of the number. If a number is a mult ...

phpcss

Organizing playing cards in a React JS application

As a beginner just starting out with React JS, I'm working on arranging cards in a medium size for my application. I came across a card design that I like and I'm seeking help to achieve something similar. Any assistance would be greatly apprecia ...

cssreactjscard

Using jQuery to define active or hover background images

I'm currently working on a list containing 5 items, with the first one active by default (thanks to jQuery adding a 'active' class). Each item has its own background image. When I click on any of the list items, another div gets updated with ...

jquerycssevents

Issue with triggering function within Material UI Tabs

The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box. There are two main problems: ...

cssmaterial-ui

What is the best way to load specific CSS in an rhtml file?

In the world of website development, we often find several pages that are generated from the same layout.rhtml file. Along with a global css file, each page may also have its own unique css file - such as page1.css for page1.rhtml and page2.css for page2.r ...

cssruby-on-railsruby

Adjusting the slider with jQuery and CSS to extend beyond 100% while remaining within the div boundaries

Currently, I'm working on customizing a jQuery slider. My goal is to achieve the same functionality as the jQuery UI slider where you can set a max value like "2500" and the slider will smoothly adjust without going outside of the specified div or scr ...

javascriptjqueryhtmlcss

The alignment in Firefox and Google Chrome does not appear to be consistent

The appearance of the content is correct in Google Chrome but incorrect in Firefox. Does anyone have any suggestions on how to fix this for Firefox? ...

htmlcsspositionlesscss-position

Create an Observable by combining two interconnected sources

I need to combine values from two different Observables into one Observable. The solution is using the zip operator, but my situation is a bit more complex. I have an id for A. A {id, name, idOfRelatedB} //first observable B {...} // second So, in order ...

angularrxjsreactivex

Angular 4: Transform a string into an array containing multiple objects

Recently, I received an API response that looks like this: { "status": "success", "code": 0, "message": "version list", "payload" : "[{\"code\":\"AB\",\"short\":\"AB\",\"name\":\"Alberta&b ...

javascriptjsonangulartypescriptobject