0

Twitter ブートストラップに基づくレスポンシブなワードプレス テーマを使用しています。何らかの理由で、サイド バーの画像のサイズが正しく変更されません。([サイト][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幅は 300px です。autoまたはである必要があります100%。次に、必要に応じてフォーム要素のサイズを調整します (ところで、送信ボタンはテキスト入力と同じテキストと背景を持っています。実際にはアクション ボタンであるのに、入力する情報が 2 つあるようです。白である必要はありません。青の上に、多分もっと濃いグレーで十分でしょう.私はデザイナーではありませんが;））
  • Facebook ウィジェットの幅は固定です。このウィジェットのモバイル版はありますか?
  • Instagram のものと同じ問題: 画像には 300 (ピクセル) の HTML 幅属性があります。
于 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 に答える