[ 解決済 ] VK 3PRの文字位置と表示について

[masako.s]

いつもお世話になりありがとうございます。
VK ３PRのCSSの書き方が良く分かりません。
色々と試したのですが上手くいきません。
希望は下記の通りです。
ご教示のほどよろしくお願い致します。

１、VK 3PRの説明文を左寄せにしたい
２、VK 3PRをスマホの時だけ2列表示にしたい

何卒宜しくお願い致します

[DRILL LANCER]

１、VK 3PRの説明文を左寄せにしたい

「VK 3PR ウィジェット」の話なら既に左寄せになっていますが・・・
似たようなものとして「VK PR Blocks」等があるので、正式名称で言ったほうが良いかもしれません。

２、VK 3PRをスマホの時だけ2列表示にしたい

1行目に２つ、２行目に１つでその右に空白ができるという感じになるので不格好になると思います。
先頭か最後尾の幅を100%にすれば多少は解消されそうですが・・・

Attachments:

You must be logged in to view attached files.

[masako.s]

RICK様

回答ありがとうございます。
VK 3PRエリアです。
タイトルは中央揃えでOKなんですが、説明文も中央揃えになっているんです・・・
何故かしら・・・・

VK 3PRエリアに対するCSSの記述が知りたいのですが、ご存知ないでしょうか？

>1行目に２つ、２行目に１つでその右に空白ができるという感じになるので不格好になると思います。
そうなりますか・・・
今までHTMLとCSSでサイトを作っていたもので、テンプレートの使い方をまだ把握できていなくて・・・

私のイメージだと、
1行目に2つ
2行目に1つ＋次のVK 3PRエリアの1つ目＝合計2つ
3行目の２つ
と、なれば良いなと思っていました。
残念・・・

[masako.s]

Charmを使っています。
スクショの丸印を入れた箇所を左寄せにしたいのですが、どなたかこの箇所のCSSの書き方をご教示頂けませんか？
もしくは、この部分のCSSの見つけ方をご教示ください。
宜しくお願い致します

Attachments:

You must be logged in to view attached files.

[DRILL LANCER]

頂いた画像はボタンも囲まれていますが・・・
とりあえず、説明文だけなら下記で左寄せにできます。

.veu_3prArea .summary {
    text-align: left;
}

今までHTMLとCSSでサイトを作っていたもので、テンプレートの使い方をまだ把握できていなくて・・・

私のイメージだと、
1行目に2つ
2行目に1つ＋次のVK 3PRエリアの1つ目＝合計2つ
3行目の２つ
と、なれば良いなと思っていました。
残念・・・

HTMLとCSSでサイトが組め、Bootstrap のグリッドシステムか flexbox を扱えるのならカスタム HTML ブロックやカスタム HTML ウィジェットでエセ3PRを自分で組むのもありだと思います。

HTML 構造と CSS は開発者ツールを使えばカンニングでき、自分で HTML & CSS を組んだほうが幅広く対応できるからです。

ちなみに、Lightning ( Pro も含む ) は 100%GPL なので、改変やカスタマイズを自由に行うことができます。

現在 Lightning Skin Charm は Bopotstrap 3.4.1 をベースとしていますが、そろそろ Bopotstrap 4.3.1 をベースとしたものがでると思います。
（3.4.1 と 4.3.1 ではブレイクポイントの扱いが異なるので注意が必要 & 来年には Bootstrap 5 に対応したものが出るかも？)

[masako.s]

RICK様

ありがとうございます。
とても親切な回答に涙が出ます。

テンプレートのセレクタが分からなくて。
なるほど、カスタマイズも出来るんでね。
幅が広がりますね。

勉強します！
ありがとうございました。

[投稿者]

投稿