I tried everything, from documentations, last 10 stack overflow answers, and nothing helped. I tried with:

<meta name="viewport" content="width=device-width, initial-scale=1">

I tried with @@meedia in style, I tried with w-100 on card body, everything and nothing helps. I need whole application like this to have normal width so please help. I have VS 2022 with .NET 6 onboard.

I just cannot make when I start an application (on desktop) and go on F12, put on mobile. The card-body is really long and I want to set width of card-body to mobile screen size.

Code is this:

<div >
<div >
    <div >
        <div >
            <a  asp-area="" asp-controller="Oglas" asp-action="ProdajaKuce">Prodaja kuća</a>
        </div>
    </div>
</div>
<div >
    <div >
        <div >
            <a  asp-area="" asp-controller="Oglas" asp-action="ProdajaStanova">Prodaja stanova</a>
        </div>
    </div>
</div>
<div >
    <div >
        <div >
            <a  asp-area="" asp-controller="Oglas" asp-action="ProdajaNekretninaZaOdmor">Prodaja nekretnina za odmor</a>
        </div>
    </div>
</div>

and the final result is still the same.

CodePudding user response：

The w-100 just sets the width to be 100% of the parent container, and in this case that is specified by col-sm-4. Bootstrap makes use of 12 columns, and divides the content up into that based on the col- classes. If you want your columns to each occupy a full row, then simply make use of col-12.

If you want them to occupy the full width on mobile, but three columns on desktop, you can make use of the combination of col-sm-12 and col-md-4 as seen in the following example:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <a  asp-area="" asp-controller="Oglas" asp-action="ProdajaKuce">Prodaja kuća</a>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        <a  asp-area="" asp-controller="Oglas" asp-action="ProdajaStanova">Prodaja stanova</a>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        <a  asp-area="" asp-controller="Oglas" asp-action="ProdajaNekretninaZaOdmor">Prodaja nekretnina za odmor</a>
      </div>
    </div>
    </div

CodePudding user response：

That did not solve my problem. Like in the attachment, there's still the same problem. On mobile device, the column is not closed.