无法覆盖响应式设计中的 css 元素

Question

这是problematic Link。我在 CSS 中有一个名为 tbox 的元素。它是一个具有 width:100% 的内嵌框。在主页上它根据它的父级完美地调整它的宽度并且是完美的响应，但是当我进入post时，它的宽度根据里面的内容而变化。这里有一些 screenshots

这是post，当我打开它时-

这是 tbox

的代码

.tbox{
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

}

当我将宽度更改为 850px 时，它在桌面上运行良好，但我无法覆盖响应式设计中的宽度。它始终保持 850px。

那么如果宽度是 850px，如何让它响应？或者还有其他解决办法吗？

Answer 1

你可以使用媒体查询来响应，并且这段代码必须写在 main css as like 首先你的 main css

.tbox{
display: inline-block;
width: 90%; // change it as you want
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}

然后把上面的代码写在下面

@media (max-width:780px) { 
.tbox{
 display: inline-block;
 width: 100%; // change it as you want
 height: auto;
  padding: 2px;
  background-color: #FFFFFF;
  border-radius: 25px;
  } 
  }

Answer 2

需要在.tboxclass-

中添加box-sizing属性

.tbox {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;
    box-sizing: border-box; // add this property in main css
}

Answer 3

尝试像这样编写媒体查询，然后您的 div 将响应

.tbox{
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

}

@media(max-width:767px) {
 .tbox{
    display: inline-block;
    width: 90%; //change percentage here
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

    }
}

@media (max-width:1024px) and (min-width:768px) {
 .tbox{
    display: inline-block;
    width: 100%; //change percentage here
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

    }
}

@media (max-width:414px) and (min-width:100px) {
 .tbox{
    display: inline-block;
    width: 70%; //change percentage here
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

    }
}

Answer 4

问题不在于 tbox 在您的代码中搜索 .item .post.hentry 并将 width: 850px; 更改为 max-width: 850px;

.item .post.hentry {
    max-width: 850px;
}

无法覆盖响应式设计中的 css 元素

Unable to overriding a css element in responsive design

html

javascript

css

jquery

blogger