Include additional space on large screens only

Currently working on an angular 9 app and I made some adjustments to my view by adding margin in order to shrink the size of the form.

<div class="row">
  <div class="col-12 mb-4" *ngIf="!displayListCompanies; else companiesList">
    <div class="card" style="min-height: 579px; margin-right: 200px; margin-left: 200px">
      <div class="card-body justify-content-between align-items-center">
        <div class=" company-welcome-logo">

        </div>
        <p class=" text-justify text-center font-weight-bold font-size-xlarge"><b>{{'company.welcome-abord' | translate}} {{ displayName }} !</b></p>
        <p class=" text-justify text-center">{{'company.welcome-text1' | translate}} <br/> {{'company.welcome-text2' | translate}} </p>

        <button class="btn btn-primary btn-lg btn-shadow align-items-center align-content" (click)="createCompany()">
          {{ "company.create" | translate }}
        </button>

      </div>
    </div>

  </div>

  <ng-template #companiesList>
    Another magic element!
  </ng-template>
</div>
<simple-notifications></simple-notifications>

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

My goal is to maintain the margin on medium screens but remove it on smaller devices. I attempted to use bootstrap for this purpose without any luck. Any suggestions on how I can achieve this? Thank you in advance.

cssbootstrap-4angular-ui-bootstrap

Answer №1

To create responsive design, utilize CSS media queries. Add extra margins specifically within the min-width: XXXX section.

Here's an example:

<style>

@media only screen and (min-width: 1000px) {
  /* For larger screens: */
  .card {margin-right: 200px; margin-left: 200px}
}

</style>

If you have multiple divs with the same class name like 'card', consider giving each one a unique ID. This way, in the media query, you can target specific cards by using their IDs (#formcard in this case).

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

Conceal a designated H2 identifier through the use of either javascript or CSS

We are currently exploring Zendesk for our customer support website, but we have encountered some limitations in terms of customization. Our goal is to remove specific text from the page by utilizing Zendesk's widgets function, which can be implemente ...

javascriptjquerycsszendesk

Adjust the height of the parent container using an unordered list

I have a menu in an unordered list and I am struggling to make each <li> the height of its parent. Despite knowing that this is a basic task, I can't seem to figure out where I am going wrong. <div class="menu"> <ul> <li cl ...

htmlcss

Remove checked rows in a table with a single click

I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation. Here is the code for the Delete button: <tr id="deleteproject" > <td wi ...

javascripthtmlcsshtml-table

What is the best way to center a single element perfectly between two other elements within a container that is positioned absolutely in the center of the window?

I need to create a markup that has the following structure: <div id="container"> <div id="left"> This is the main text. </div> <div id="center"> Hello! </div> <div id="right"> some content </div> ...

htmlcss

Tips for refreshing the CSS cache in Symfony2 production when the content has been updated

When minifying the CSS in production (using php app/console assetic:dump), the file is recreated but the name remains the same. As a result, users' browsers continue to cache the old version. One workaround is to add a parameter like ?v=12 after the ...

phpcsssymfonycaching

How to properly position HTML elements and center text within paragraphs with inputs

Hello friends! I've been scouring Google and YouTube for a solution to my issue but no luck so far. This is the first time I've encountered this problem. I want to align everything in the center, which it is, but there seems to be a vertical ali ...

htmlcss

The IDs and classes of HTML elements

I have two different implementations of a livechat script. On my sandbox site, the livechat is fixed to the bottom right of the page and scrolls with the window. However, on my live site (where this specific code comes from), it is attached to the footer. ...

javascripthtmlcss

I am experiencing an issue with my images not loading properly upon initial loading in Safari, while all other browsers are working perfectly. What

Currently, I am utilizing the 3D card-flip method on my website and it is functioning flawlessly in Firefox, IE, and even the downgraded versions of IE for older browsers. However, I have encountered an issue with Apple iOS devices and Safari. It appears ...

javascriptjqueryimagecsssafari

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Whenever I attempt to apply float left or display inline, it causes issues. The form currently has a max-width of 1000px. I was hoping that the first and last names would automatically align side by side if there is enough space. Perhaps setting a min-widt ...

htmlcssinlinedisplay

Space allocation among the columns' borders

My layout consists of 3 columns in a row, each with the class col-xs-4, covering the entire row. I am trying to add a border to each column without them overlapping. Currently, I have applied the border but there is no spacing between the columns. I want ...

htmlcsstwitter-bootstrap

The CSS sacred trifecta - troubleshooting a layout with 2 fixed columns and 1 fluid column

After putting in some hard work to create a 'holy grail'-style layout for my website, I'm faced with two issues that need fixing. The main objective is to have a 'sticky' footer that expands along with the height of the browser wi ...

htmlcss

JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

I've encountered this issue before, but I'm still struggling to resolve it. When adding dynamic content to a page (specifically a list-view), the CSS seems to disappear once the content is added. I've tried using the trigger("create") functi ...

javascriptjquerycssjquery-mobile

What is the best method for aligning forms vertically within a page layout?

I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...

htmlcssforms

When an element is transferred to a different <div>, it does not automatically inherit its new CSS styles

There's an element with existing behavior that needs to be moved to meet new requirements without losing its original styles. The challenge is applying new styles to the element after it's been moved. For example: <div id="existingStructure" ...

javascriptjquerycss

I could really use some assistance in designing a website with a grid layout

I'm envisioning a unique layout: Any suggestions? I'm struggling to translate my vision into code. Bootstrap has crossed my mind, but there's an issue with elements spanning across columns and rows in the 6x4 grid I've set up for the ...

csstwitter-bootstrapgrid

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

Initial caps - :first-letter pseudo element not behaving as intended on Firefox

I created a dropcap using the :first-letter pseudo class and it displays properly on Chrome, IE, and Edge but is not working as expected in Firefox. What seems to be the issue? The problem lies in its height. Below is the CSS code I've used: .d ...

csspseudo-classdrop-cap

Having trouble pinpointing the mysterious gap between links in the horizontal menu

I am currently working on a basic horizontal menu. I have noticed that when I hover over an item, the background color changes but there seems to be a strange 3px space on the left side of the link. I have been trying to figure out why this is happening an ...

htmlcss

Align input field and button on a single line using Bootstrap

I am trying to place an input field and a button on the same line. The button should have a fixed size, while the form should fill the available space. Despite my attempts, the button ends up lower than the input field. How can I resolve this issue? https ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...

csstwitter-bootstraptextbox