英文:
Responsiveness not working at certain condition only
问题
所以我正在尝试制作我的网站，但它无法正常工作。实际上，只有可见性起作用，但尺寸和其他东西不起作用。我仍然在学习中。
这是我的网站链接，有一张图片对可见性:hidden;起作用，但宽度、高度不起作用。
对于文本部分也是一样的。我无法更改文本部分的宽度。
以下是我的代码，
这些元素的HTML在这里，
<div class="mainContent">
<img src="BgImg.png" alt="" srcset="">
</div>
<div class="textContent">
<p>
Lorem Ipsum....
</p>
</div>
@media (max-width: 768px) {
.mainContent img {
margin-left: 100px;
}
.textContent {
width: 100px;
font-size: 15px;
}
}
我尚未将此代码发布到网站上，但在本地它不起作用。
我在我的代码中也使用了 <meta name="viewport" content="width=device-width, initial-scale=1.0">。感谢您的帮助。
英文:
So I am trying to make my site it's not working properly. Infact only visibility is working but sizes and other stuffs doesn't work. I am still learning stuffs.
www.ditikrimal.com.np
Here is my site link and there is image which responses for the visibility:hidden; but doesn't work with width, height.
Same goes for that text section. I can't change that text section's width.
Below is my code,
Html for these elements are here,
<div class="mainContent">
<img src="BgImg.png" alt="" srcset="">
</div>
<div class="textContent">
<p>
Lorem Ipsum....
</p>
</div>
@media (max-width: 768px) {
.mainContent img{
margin-left:100px;
}
.textContent{
width: 100px;
font-size: 15px;
}
}
I haven't published this code to the site but locally it doesn't work.
I have used <meta name="viewport" content="width=device-width, initial-scale=1.0"> in my code too. Thank you for your help.
答案1
得分: 0
Amaury Hanser 正如所说。
浏览器逐行读取您的 CSS，请查看下面的屏幕截图。
英文:
As Amaury Hanser said right.
Browser read your CSS line by line, Check below screen shot.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论