How to stop @media changing my blocks width?

Hello guys. I want to remove the custom width on all @media.
It looks a little weird watching on my mobile in horizontal: https://xmodels.link/example

I want to have the same width in all resolutions, just like linktree is doing: https://linktr.ee/billeeilish

For example, when we change to small resolutions the blocks width never change, only when we reach the smaller one (phone vertical).

In my site looks like this:

1200px+ width looks good
992px to 1199px it changes to a small one
768px to 991px it changes to a even smaller
And less than 767px is back to normal, the same as 1200px
I just want to remove the smaller ones to not reduce the block’s width. I mean, the ones between 768px and 1199px.

I guess I need to change bootstrap.min.css, but don't know exactly what to do.
I tried this without luck:

    @media (min-width: 768px) and (max-width: 1199.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 100% !important;
    }
    }
   
    @media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px !important; /* Adjust this value to match your design */
    }
    }
   
    @media (max-width: 767.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 100% !important;
    }
    }

PHP:

What I'm doing wrong?

 

It looks like you are on the right track with your CSS code, but there may be some issues with specificity or conflicts with other styles in your code. Here are a few suggestions to try:
1. Make sure that your custom CSS is included after the bootstrap.min.css file in your HTML file. This will ensure that your styles override the default styles from Bootstrap.
2. Instead of targeting specific container classes (.container, .container-sm, etc.), you can try targeting the parent element that contains these containers. For example, if your containers are within a section or div with a specific class, you can target that class in your media queries.
3. You can also try using the !important rule on the max-width property in your media queries to make sure that your styles take precedence over other styles.
Here is an example of how you can modify your CSS code:

[USER=124521]@media[/USER] (min-width: 768px) and (max-width: 1199.98px) {
  .your-container-parent-class {
    max-width: 100% !important;
  }
}
[USER=124521]@media[/USER] (max-width: 767.98px) {
  .your-container-parent-class {
    max-width: 100% !important;
  }
}

Code (CSS):

Replace .your-container-parent-class with the actual class of the parent element that contains your containers.
If these suggestions do not work, there may be other styles or scripts affecting the width of your containers. You can use browser developer tools to inspect the elements and see which styles are being applied. This will help you identify any conflicting styles that may be causing the issue.

 

GreenHost.Cloud, thank you very much for your response and help.

I just don't know what to replace .your-container-parent-class
My CSS knowledge is not so good.

Can you take a look, please?
URL: https://xmodels.link/example

Should I use any of these ones?
.container
.container animate__animated animate__fadeIn
.col-md
.link-content
.col-md-6 link-content
.my-1
.row

Thank you in advance

 

In https://linktr.ee/billeeilish there's a parent div that has max width 580px and width 100%;

Starting from div with class="link-content " remove all bootstrap classes .row or .col in the child div/elements.
in css:
.link-content {
max-width: 580px; /* set your own max width*/
width: 100%;
/*add padding and margin for your liking*/
}

 

Thank you very much, my friend!

I changed from:
<div class="col-md-6 link-content">

To:
<div class="link-content">

And it's working with your CSS

Just noted a little strange behaver between the 767px to 576px.
I think that doesn't make too much difference, but any idea how to fix it?

 

That's because of .container class on the first div after body tag, .container has default bootstrap different sizes depending on screen size.
Just remove .container class and leave animation class.

<div class="animate__animated animate__fadeIn">

Code (markup):

 

Thank you very much!! Working perfectly now