0

我正在使用基于 twitter bootstrap 的响应式 wordpress 主题。由于某种原因，侧边栏图像未正确调整大小。（您可以通过查看 [site][1] 并尝试调整大小来了解我的意思。）我通过向小部件声明一个固定大小来解决此问题，然后使用绝对相对定位将表单定位在其中。当您在桌面上时，图像/联系表格看起来不错，但是当您压缩布局（例如在 iphone 上）时，联系表格和图像无法正确调整大小。我不知道从这里去哪里，有点卡住了。

这是我现在正在使用的 css（可能不正确。）谢谢！

.widget .signupForm {
    /* Box always has colour, pic always on right */
    background-color: #06d0d2;
    background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;

    /* height ensures full pic is shown  */
    height: 300px;    

    /* allow us to position contents */
    position: relative;
}

/* Absolutely position the form within the widget */
.widget .signupForm form {
 position: absolute;
 right: 160px;  
 bottom: 0px;
}

.widget .signupForm form input {
 display: block;
}

@media screen and (min-width: 768px) {


/* now just resize the widget box and move the form */

.widget .signupForm {
 width: 300px; 
 height: 240px;
 background-size: 100%;    
}

    .widget .signupForm form {
        right: 120px;   
        bottom: 0px;
    }
4

2 回答 2

0

我可以在 800px 的宽度上检测到 3 个问题：

  • .widget .signupForm宽度为 300 像素。应该是auto或100%。然后如果需要，表单元素将相应地调整大小（顺便说一下，提交按钮与文本输入具有相同的文本和背景。看起来我们有 2 个信息要输入，而实际上它是操作按钮。它不需要是白色的在蓝色上，也许深灰色就足够了。不过，我不是设计师；））
  • Facebook 小部件具有固定宽度。它是否存在此小部件的移动版本？
  • Instagram 的同样问题：图像的 HTML 宽度属性为 300（像素）。
于 2012-05-19T16:07:45.997 回答
0

以下 css 在调整大小时适用于您的页面。不确定哪个文件正在应用它。在你的 css 文件中找到这个类并为其添加一个宽度，比如width:300px你是否希望它是一个完美的正方形或任何其他值。

.widget .signupForm {
    background-color: #06D0D2;
    background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 300px;
    width:300px; /* code added here */
    position: relative;
}

希望它有所帮助，如果我没有理解您的问题或者这不是您正在寻找的解决方案 - 请发表评论..

于 2012-05-26T09:08:40.043 回答