Lightning Works Unit の投稿一覧のレイアウトについて

[RocK]

以前、BizVektor Grid Unitを使用していましたが、BizVektor Grid Unitはモバイル表示した際も、
コンテンツが横並び表示できましたが、
Lightning Works Unitもモバイル表示した際に横並びは可能なのでしょうか？
デモサイトを見る限りでは、縦並びになっているので、
どなたか、横並びした方が居ましたら、ご報告いただきたく思います。
宜しくお願い致します。

• このトピックはRocKが4年、 4ヶ月前に変更しました。
• このトピックはVektor,Incが4年、 3ヶ月前に変更しました。

[Vektor,Inc]

外観 > 追加CSS などに以下のような感じで記載すれば可能です。

@media (max-width:768px){
	.works_item{
		width:50%;
	}
}

[RocK]

キーマスターさん、ありがとうございます。
BizVektor Grid Unitのように表示できないと購入できないなと検討していたところでした。
購入し、動作確認できましたら、ベストアンサーをつけさせて頂きます。
宜しくお願い致します。

[RocK]

購入し上記追加CSSで2列表示できました。
PaleⅡの方で設定するんですね。そこをちょっと迷いましたが｡｡｡
ありがとうございました。

ついでなのですが、一覧画像サイズの設定変更などはできますか？
今回は正方形画像のみを使用する予定なので正方形でいいのですが、
もし、4：3などのサイズの設定もありましたら、
ご教授願います。

WordPress：バージョン 5.3.2
Lightning Proバージョン: 2.6.4
Lightning Skin Pale：バージョン 3.0.6
Lightning Works Unit：バージョン 2.1.1

[Vektor,Inc]

CSSを記載する場所は

* 外観 > カスタマイズ > 追加CSS
* ExUnit > CSSカスタマイズ
* 子テーマのstyle.css

などどこに記載してもかまいません。

縦横比は現状 6:4 になっています。

画面サイズに対して縦横比を維持するためにJavaScriptで動的にプログラム処理しているので、
それを変更しようとする場合は一定の画面サイズ毎に高さを固定する指定をするかたちになりますが、
そのあたりは個別のカスタマイズになってまいりますので公式なサポート対象外になります。

下記にカスタマイズに関する基本的な事が記載してありますので参考にしてみてください。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

[RocK]

キーマスターさん、ご回答ありがとうございます。
やはり、そうなんですね。
何となく、難しそうなきはしていました。

必要であれば個別のカスタマイズをお願いしてみます。
ありがとうございました。

[Vektor,Inc]

下記を参考に数値を変更すれば、縦横比固定とまではいきませんが、
近しい表示は出来るのではないかと思います。

.works_item ._thumb {
    height: 200px !important;
}
@media (min-width: 576px){
.works_item ._thumb {
    height: 300px !important;
}
}
@media (min-width: 768px){
.works_item ._thumb {
    height: 300px !important;
}
}
@media (min-width: 992px){
.works_item ._thumb {
    height: 300px !important;
}
}
@media (min-width: 1200px){
.works_item ._thumb {
    height: 300px !important;
}
}

[Vektor,Inc]

下記の vw を使えばもっといい感じに調整出来る気がします。
vw は画面の横幅に対するパーセンテージです。
現在 15 になっている数字を変更してお好みに調整してください。

.works_item ._thumb {
    height: 15vw !important;
}
@media (min-width: 576px){
.works_item ._thumb {
    height: 15vw !important;
}
}
@media (min-width: 768px){
.works_item ._thumb {
    height: 15vw !important;
}
}
@media (min-width: 992px){
.works_item ._thumb {
    height: 15vw !important;
}
}
@media (min-width: 1200px){
.works_item ._thumb {
    height: 15vw !important;
}
}

• この返信は4年、 3ヶ月前にVektor,Incが編集しました。

[RocK]

ご回答ありがとうございます。
いろいろと、試してみたいと思います。

[RocK]

いろいろと、試してみましたが、PC表示だけは縦横比が決まってしまっているのでしょうか？
ご回答宜しくお願いいたします。

[投稿者]

投稿