3

WordPressでレスポンシブサイトを作っています。このサイトには、Marketo フォームが埋め込まれています。(Marketo は、私たちが使用しているマーケティング自動化システムです。) フォームには、スタイリング用のカスタム CSS があります。現在、フォームはデスクトップでは問題なく表示されますが、電話では表示が崩れます。フォームのカスタム CSS、埋め込みコード、ランディング ページなどの CMS 上のコードを変更して、フォームがデバイスごとに正しく応答するようにするにはどうすればよいですか? クラスタグを挿入することの問題ですか、それとももっと複雑なことですか?

フォームの 1 つの CSS を次に示します。

.mktoForm{color: #000000;width:378px !important; max-width: 407px; float:right; line-height: 34px; background: none repeat scroll 0% 0% #F0F0F0; padding: 10px 50px 20px 50px;
border-radius: 5px;font-family: 'Open Sans', sans-serif !important;}
label.mktoLabel {color: #000000;}
.mktoLabel {padding: 0 0 12px 0 !important; width: 109px !important;}
.mktoField{color: #000000; font-size: 14px !important; min-height: 33px; padding: 0px 0px 0px 5px !important; width: 100% !important; border: 1px solid #FAAA43; border-radius: 5px;}
.mktoOffset{width:0px !important; display:none !important;}
.mktoForm .mktoGutter{height:auto !important;}
.mktoForm .mktoFieldWrap{padding: 11px 0 0px 0;}
.mktoError{left:0px !important;}
.mktoButton{color: #000000 !important; font-size: 14px !important; min-height: 33px; padding: 0px 10px 0px 10px !important; width: 100%; border: 1px solid #FAAA43 !important; border-radius: 5px; background-color: #FFC000 !important; background-image: none !important;}
.mktoButton:hover{background-color: #fc9918 !important;}
.mktoButtonWrap{margin-left: 72px !important; display: inline-block;}
.mktoButtonRow{display: block !important; margin-top: 8px !important;}
.mktoAsterix {display:none !important;}
.mktoForm span {float:left;}
.tophed{

    float: left;
margin-top: -2px;
margin-bottom: 0px;
}
.lastlab{float: left;
margin-top: -9px !important; 
  font-size: 13px !important;

}
.mktoForm * {
font-family: 'Open Sans', sans-serif !important;
}
.mktoFormRow{
  width:250px;
}
.mktoTextField 
{
width:278px !important;
}
.mktoEmailField
{
width:278px !important;
}

WordPress のこのセクションの html は次のとおりです。Marketo は、ランディング ページにフォームを埋め込むための JavaScript を提供します。以下のスクリプトが表示されます。

<p>[column lg="6" ]<span style="font-size: 17px;"><strong>Placeholder text</span> <br /> <br /> <img class="thumbnail img-responsive" style="padding-top: 7px; width: 120%;" src="Image URL" alt="alt tag goes here" /> [/column][column lg="1" ][/column][column lg="4" ]<script src="//app-ab05.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1011"></form>
<script>MktoForms2.loadForm("//app-ab05.marketo.com", "578-AFO-782", 1011);</script>[/column][column lg="1" ][/column]

この問題に対処する方法についてはかなり迷っているので、どんな助けでも大歓迎です。

ありがとう、デビッド

4

2 に答える 2

0

投稿したスタイルが独自のスタイルである場合は、それらをすぐに変更するか (画面サイズに基づくメディア クエリを使用する可能性があります)、サイトの CSS でそれらを上書きすることができます。既に !important タグが付いている css をオーバーライドするための巧妙な方法は、セレクターをさらに具体的にすることです。たとえば、上記の css には次のようなものがあります。

.mktoTextField 
{
width:278px !important;
}

それをオーバーライドしたい場合は、すでに !important ですが、コンテナー div(s) を呼び出して、セレクターをより具体的にする必要があります。

.myContainerDiv .mktoTextField
{
width: 100% !important;
}

超具体的にするために、できる限り上に行くこともできます。

body .container .mkto-wrap .myContainerDiv .mktoTextField
{
width:100% !important;
}

挿入された Marketo コードではなく、作成したアイテムのクラスを呼び出しているだけです。

それはあなたが探していたものですか？

于 2014-10-16T14:12:03.813 に答える