Question 86552 in ASP.NET Question posted in
The official documentation can be found here.

How to handle default margin in asp.net MVC

I am working on an MVC project. when trying to add a cover poster to the page, getting some margin in two sides. I tried several codes to get the image in full width, but it doesn’t work.

what I tried,

This is my full html and css.

    .cover {
        background-image: url("https://images.pexels.com/photos/133633/pexels-photo-133633.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
        height: 100vh;
        width: 100vw;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
/*section {
    margin-left: -115px;
    margin-right: -115px;
}*/
body,html{
    margin:0;
    padding-top:0px;
    padding-bottom:0px;
    height:50%;
    width:100%;
}

*{
    margin:0;
    padding:0;
}
@{
    ViewBag.Title = "Home Page";
}
<section>
    <div class="cover img-fluid"></div>
</section>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the above question, the problem is not in the Html or Css. After a lengthy research I found that the problem was in the bootstrap.Css file. I am using the bootstrap version 5.1.3

    Bootstrap classes container and container-fluid are using media rules(@media) and limiting the display area using max-width property. I simply commented the property and run the project then its working perfectly fine.

    Adding the bootstrap css section below where I made changes.

    .container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
/*  padding-right: var(--bs-gutter-x, 0.75rem);
*/  /*padding-left: var(--bs-gutter-x, 0.75rem);*/
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
/*    max-width: 540px;
*/  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
/*    max-width: 720px;
*/  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
/*    max-width: 960px;
*/  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
/*    max-width: 1140px;
*/  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
/*    max-width: 1320px;
*/  }
}

    I don't know what to do in the case of a cdn user and also I don't know is this a good practice. But its gives me exact output what I am expecting.

    Appreciating the contributors who spend their time and effort to answer this question.

    Thank you.


  2. 0

    Since you are using bootstrap this snippet can’t run your code correctly (Next time tell in your question that you use bootstrap). But what i found out when u showed the code with the cards. You didn’t work in the section. if you want you image to be the background and work on that image. Then you have to work in the div or in this case section. Try the HTML code below that should work.

    .cover {
 background-image: url("https://images.pexels.com/photos/133633/pexels-photo-133633.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
 height: 100vh;
 width: 100vw;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 }


body{
    margin:0;
    padding-top:0px;
}

*{
    margin:0;
    padding:0;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="cover img-fluid">
      <div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-2 col-sm-4 card mycard mt-5">
            <div class="card-img img-fluid text-center myimg">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.iAhcp6m_91O-ClK79h8EQQHaFj%26pid%3DApi%26h%3D160&f=1" />
            </div>
            <div class="card-body">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div class=" col-md-2 col-sm-4 card mycard mt-5">
            <div class="card-img img-fluid text-center myimg">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.iAhcp6m_91O-ClK79h8EQQHaFj%26pid%3DApi%26h%3D160&f=1" />
            </div>
            <div class="card-body">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div class=" col-md-2 col-sm-4 card mycard mt-5">
            <div class="card-img img-fluid text-center myimg">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.iAhcp6m_91O-ClK79h8EQQHaFj%26pid%3DApi%26h%3D160&f=1" />
            </div>
            <div class="card-body">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div class=" col-md-2 col-sm-4 card mycard mt-5">
            <div class="card-img img-fluid text-center myimg">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.iAhcp6m_91O-ClK79h8EQQHaFj%26pid%3DApi%26h%3D160&f=1" />
            </div>
            <div class="card-body">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
    </div>
  </div>
    </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search