0

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

#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 上不起作用。所以，我写了一些应该通过“媒体”查询运行的 css，但我的 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 上会中断。我还没有尝试过其他设备。

这是网址，如果你想看看：

http://www.chalupaholics/bob/

谢谢

4

1 回答 1

0

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

于 2012-10-05T10:25:46.923 回答