0

私のサイトで、サイドバーの一番下 (右側) までスクロールすると、(テキスト ウィジェットを介して) 私が作成しようとしているメール サインアップ ボックスが表示されます。これを正しく機能させるには1日かかりますが、理解できません。あるものは機能し、別のものは壊れます。テキストウィジェットに何を投稿するべきか、style.css に何を投稿して皆さんに見てもらうべきかわかりません。たぶん、誰かがリンクをチェックして、何が起こっているかを見ることができるかどうかを確認できます. 必要に応じてコードを投稿していただければ幸いです。テーマは、Twitter ブートストラップを使用したレスポンシブです。

これが私のcustom.cssです（これは子テーマです）これを変更する必要がある場合は、お気軽にお知らせください。

/* ------------------------------------------------------------------------ Import Standard Styles */

@import url( '../standard3/style.css' );

/* ------------------------------------------------------------------------ Customizations */
#disqus_thread {
    clear: both!important;
    background: white;
    background: white;
    margin: 0 0 40px 0;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
}

.dsq-comment-text p
{
color: black;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}



.widget .signupForm {
    /* Box always has colour, pic always on right */
    background-color: #06d0d2;
    background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noah-side-bar1.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: 70px;
}

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


//* 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: 50px;
    }
}

/* adjust slightly for larger sizes */
@media screen and (min-width: 980px) {
    .widget .signupForm {
        width: 343px;
        height: 275px;
        background-size: 100%;    
    }

    .widget form .signupForm {
        right: 160px;   
        bottom: 70px;
    }
}


/* ------------------------------------------------------------------------ Media Queries */

/* Smartphones */
@media (max-width: 480px) {

}

/* Tablet and Mobile */
@media (max-width: 979px) {    

}

/* Mobile to Tablet */
@media only screen and (max-width: 767px) {

}


/* Landscape Tablets */
@media (min-width: 768px) and (max-width: 979px) {

}

/* Desktop */
@media (min-width: 980px) {

}
4

1 に答える 1

1

答えはとても簡単です。使用しているのbackground-image幅は 370px ですが#sidebar、ウィジェットを収容するのは 300px の幅しかありません。

解決策 1
イメージング ソフトウェアを使用してイメージを正しい幅に縮小するか、 の幅を広げる必要があります#sidebar。

解決策 2
または、背景の位置を変更して、吹き出しが切り取られる部分にならないようにすることもできます。

.widget .signupForm{ background-position: -19px 0;}

解決策 3
CSS3 を使用して、次のbackground-image使用に適合させることができますbackground-size。

.widget .signupForm{ background-size: contain; }

ただし、サポートは制限されています: https://developer.mozilla.org/en/CSS/background-size

編集：投稿されているCSSに基づく

お手持ちのオリジナルサイズの画像をご利用いただけます。すでに宣言されているルールはbackground-size、CSS の次の行のために失われています。

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

最初のスラッシュを削除すると、すべての CSS が適切に機能するはずです。

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

そして、画像の邪魔にならないようにフォームを配置するには、次のすべてのルールを変更します.widget .signupForm form。

.widget .signupForm form {
    bottom: 50px; /* change to 0 */
    right: 120px;
}
于 2012-05-18T01:38:11.473 に答える