What causes the width of a card to vary between Windows and a Macbook Pro?

Here is the code I have:

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-container>
        <v-card
          max-width="1000"
          class="mx-auto"
        >

          <v-form v-model="valid">
            <v-container>
              <v-row>
                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="First name"
                    required
                  ></v-text-field>
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="Last name"
                    required
                  ></v-text-field>
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="E-mail"
                    required
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
          </v-form>

        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

You can see a demo of this code here

If you access it on a MacBook Pro, it will look like this :

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

But if you access it on Windows, it will look like this :

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

The width appears larger on Windows. How can I make it consistent across both platforms?

Note:

I am using a MacBook Pro 13 inch 2017 and have installed Windows on it using Bootcamp to test how it looks on both systems.

Answer №1

Try taking out the term 'max' from the property max-width. This should resolve the issue. The max width determines the maximum width a box can attain.

If the content fits within this limit, it won't cause the box to expand further (exactly what you're observing on the macbook).

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

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

I am working on creating a grid overlay using an absolutely positioned non-interactive div. My approach involves using the repeating-linear-gradient property as suggested by others for this purpose. The functionality works smoothly in Chrome, but I seem to ...

What is the proper way to display the initial content of the menu?

I am currently working on a website design for an upcoming festival. The festival spans over three days, so I have created buttons to navigate and load the content for each day separately. Is there a way for me to make the content for the first day di ...

Managing Laravel/Vue Component Registration and Vue Initialization

I am a beginner VueJs developer and there is one aspect that is causing me some confusion: Utilizing multiple single page components in the app.js file. These are the queries I'm struggling with: Do I need to list ALL of my top-level (parent) compo ...

The height of the Bootstrap Sidebar is not displaying correctly

Currently, I am working on developing a traditional sidebar layout for the left portion of my template using Bootstrap 4. Here is the code snippet I have implemented: <nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color: ...

Tips for disabling drag slide functionality in Vue with agility

I am working with vue-agile and encountering an issue where videos are causing the slider to move unexpectedly when dragging the player's pointer. Images display fine, but this drag/swipe behavior is disrupting the user experience. Is there a way to d ...

Unexpected behavior with VueJS Select2 directive not triggering @change event

Recently, I implemented the Select2 directive for VueJS 1.0.15 by following the example provided on their official page. However, I am facing an issue where I am unable to capture the @change event. Here is the HTML code snippet: <select v-select="ite ...

Is there a way to incorporate pseudo-dynamic css into my projects?

I'm struggling with managing custom colored elements on my website. For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but t ...

Align a div vertically in a responsive design layout

How can I get the text inside "grid2" and "section2" to vertically align in the middle? Is this issue related to my HTML or is it a problem with the CSS? Can someone guide me in the right direction? I have searched for similar questions but the answers h ...

The width of table cells within a div is completely disregarded

The cell width property seems to be ignored in this situation. Despite trying numerous approaches, the cells are splitting into equal portions and not respecting the specified width. Inspecting the code did not reveal any unexpected inheritance that could ...

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

Change the body selector in CssResource to apply custom styles

I have implemented a CssResource within a ClientBundle following the guidelines provided in the documentation at this link. To access the styles from my UiBinder xml, I have used ui:with as explained in the documentation available at this guide. While th ...

Link dynamic Vue image source from node_modules

I am currently working on a Vue component that displays an SVG image from my node modules based on a specific image name or key provided by an API. If I directly specify the source image like ~cryptocurrency-icons/svg/color/eur.svg, it loads without any i ...

Troubleshoot and resolve the issue of a page scroll freeze bug occurring while scrolling through an overflowed

My webpage features a Hero section with 2 columns - the left column contains a gallery slider, and the right column consists of 2 text blocks. The challenge here is that the right column needs to be 100% of the screen height while scrolling. To achieve thi ...

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

Having troubles with angular due to doodle throwing errors?

https://codepen.io/tuckermassad/pen/rPYNLq I took the CSS doodle code from the above link and incorporated it into my angular component: <section class="main"> <css-doodle grid="5"> :doodle { @grid: 10 / 100%; } ...

"Need help passing an API key in the header of a Vue.js project? I recently encountered this issue while using a

How can I include an API key in the header of a Vue.js request? I am using DRF pagination. methods: { getPostData() { axios .get("http://192.168.43.126:8000/api/?page=" + this.currentPage, { headers: { &q ...

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

Troubleshooting issue: Bootstrap 4 Card trimming absolute content within div

Having trouble adding a rounded icon to the top center of a card, but part of the icon is getting cut off. Any suggestions? .header-icon-round { width: 60px; height: 60px; border-radius: 30px; font-size: 30px; background-color: #fff; ...