The padding is too big after adding grid in ASP.NET Core while it is fine in VS Code

Question

The padding is too big after adding grid in ASP.NET Core while it is fine in VS Code

353 Views Asked by RVasilev At 31 May 2022 at 21:41

I have been designing a site with grid and flexbox in Visual Studio Code and there everything is fine (visually). VS Code

Now when I have to add the backend I had to transfer my code to Asp.Net Core (v5.0) and for some reason the padding is too much around the grid Asp.Net Core. The CSS files are identical. Here is my code for the grid:

body {
    margin: 0;
    overflow-x: hidden;
    background-image: url("../background.jpg");
}

.container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 0.1fr 0.8fr 1fr 1fr 0.1fr 0.8fr;
    grid-template-rows: 80px 2fr 1fr 100px;
    gap: 10px;
    padding: 1px;
    box-sizing: border-box;
}

Any ideas what to change as everything shrinks as well and there is too much space that's not being used...

EDIT:

Here is the code from the main view:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<body>
    <div class="container container-main">
        <div class="header">
            <nav>
                <ul>
                    <li><a text-white asp-area="" asp-page="/Index">Home</a></li>
                    <li><a text-white asp-area="" asp-page="/Tournaments">Tournaments</a></li>
                    <li><a text-white asp-area="" asp-page="/Statistics">Statistics</a></li>
                    <li><a text-white asp-area="" asp-page="/ContactUs">Contact Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="account">
          <form method="post" asp-page-handler="Account">
          <a> <input type="submit" value="@User.Identity.Name"/>  </a>
          </form>
        <partial name="_LoginStatusPartial" />

        </div>
        <div class="content1 flex-content1">
            <div class="flex-item flex-item1"><a>Latest News</a></div>
            <div class="flex-item flex-item2"><img src="Keyboard1.png" alt="keyboard">
            <a>SOME NEWS

            </a></div>
            <div class="flex-item flex-item3">
             <div class="pages">
             <button>left</button>
             <button>right</button>
             <a>date</a>
            </div>

            </div>
        </div>
        <div class="content2">
            <div class="text"><a>ABOUT THE SITE
            </a></div>
        </div>

        <div class="content3">
            Advertise
        </div>
        <div class="footer flex-footer">
            <div class="flex-item flex-item1"><a>dsaf</a></div>
            <div class="flex-item flex-item2"><a>gsd</a></div>
            <div class="flex-item flex-item3"><a>jdsg</a></div>
        </div>

    </div>
    </body>

And here is the code from the layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DuelSys_WEB_Application</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Original Q&A

There are 1 best solutions below

**Qing Guo** · Accepted Answer · 2022-06-02T06:19:18.210000

You could set the body container's max-width property to 100% in the layout page. Please refer the following steps to update your code.

Add .body-containercode in your main view style

    .body-container {

             max-width: 100%;
         }

Add body-container in class attribute in your layout .

<div class="container body-container">
         <main role="main" class="pb-3">
             @RenderBody()
         </main>
</div>

The padding is too big after adding grid in ASP.NET Core while it is fine in VS Code

There are 1 best solutions below

Related Questions in CSS

Related Questions in ASP.NET-CORE

Related Questions in PADDING

Trending Questions

Popular # Hahtags

Popular Questions