Question

我试图通过添加页面宽度的图形横幅和类型处理来修改Portfolio Page Wordpress主题。它是一个响应主题，但我显然搞砸了。 css在x轴上使用背景重复来重复一些木板以用于全屏，然后将其他图形放置在其上以响应地居中。这就是我正在讨论的问题：

#bgImageCornerTL
{
position:relative;
top:0px;
left:0px;
margin-top:0px;
height: 274px;
width: 100%;
z-index: 10;
background-image:url(http://chalupaholics.com/bob/wp-content/uploads/2012/10/PanelWStripe.png);
background-repeat:repeat-x;
background-position: center center;
}
#LogoContent {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -250px;
    width: 872px;
    height: 198px;
    z-index: 12;
    background-repeat: no-repeat;
    background-image: url("/bob/wp-content/uploads/2012/10/BufBobwords.png");
    opacity: 0.9;
}

重复不在iphone上工作。所以，我写了一些应该通过＆＃34;媒体＆＃34;查询，但我的iphone没有拿起它，页面看起来仍然是错误的。（对于iphone，我使用单个图形作为标题，图形和木板拼成一个图形。）任何人都可以发现我做错了吗？这是CSS：

@media screen and (max-device-width: 480px) {

{
#bgImageCornerTL
    {
    position:relative;
    top:0px;
    left:0px;
    margin-top:0px;
    height: 147px;
    width: 100%;
    z-index: 10;
    background-image:url(http://chalupaholics.com/bob/wp-content/uploads/2012/10/TopBannerIphone.png);
    background-repeat:no-repeat;
    background-position: center center;
    }
#LogoContent,#Tasty,#Address,#Order {
    display:none;
}

}

依旧......

这里是header.php文件的相关区域，我在其中添加了一些div来处理新图形：

<div id="bgImageCornerTL"></div>
<div id="navwrap"></div>
</head>

<body>

<div id="LogoContent">
<div id="Tasty"></div>
<div id="Address"></div>
<div id="Order"></div>
</div>



<div id="wrapper">

依旧...... 它在普通大小的屏幕上看起来很好，但在iphone上打破了。我还没有尝试过其他设备。

如果你想看一下，这是URL：

http://www.chalupaholics/bob/

由于

Answer 1

您的媒体查询中的#bgImageCornerTL选择器上方有一个额外的“{”

为什么这个响应式CSS不起作用？

1 个答案: