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

这是problematic Link。我在CSS中有一个名为tbox的元素。它是一个宽度为100％的内联框。在主页上根据其父母完美调整其宽度并且完美响应，但是当我进入帖子时，其宽度根据其内容而改变。下面是一些 screenshots 无法覆盖响应式设计中的css元素

这是后，当我打开它 -

这是tbox

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

}

代码当我改变宽度850像素，它的工作原理以及在桌面上但我无法在响应式设计中覆盖宽度。它始终保持850px。

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

来源

2017-02-09 Akshay

有没有什么与那个维度。它是导致问题的父元素吗？ – Phix

PLZ添加一些更多的细节，你想在这里实现什么？ – shyamm

我想你在你的帖子页面中检查它的父容器的宽度。确保它的宽度也是100％。否则，你应该看看媒体查询 –

的问题不在于tbox搜索你的代码为.item .post.hentry，改变width: 850px;到max-width: 850px;

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

来源

2017-02-09 09:36:06 Bassam

您可以使用媒体查询的响应像这种代码必须写娄主css像第一次你的主要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; 
    } 
    }

来源

2017-02-09 06:23:42

我已经这样做了，但没有运气。 – Akshay

您需要添加box-sizing物业.tbox类 -

.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 
}

来源

2017-02-09 06:28:54

倍这样的尝试写媒体的质疑，那么你的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; 
 

 
    } 
 
}

来源

2017-02-09 06:43:50

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

回答

相关问题