トップページの"画像バナー"セクションをパソコンで見る場合、少し右に寄せたい

日本語 ディスカッション 技術的なQ＆A
1

毎度お世話になります。

タイトル通りではありますが、トップページの"画像バナー"セクションをパソコンで見る場合少し右に寄せたいと思っております。現在のところパソコンで見た場合スクリーンショットにある通り画像バナーが左に寄りすぎています。

スマホで見る分には画面幅もあって全然変ではないのですがパソコンで見るとやはり少し不細工になっていると思います。

カスタムCSSで少し位置をいじっていますがパソコンだけ右に寄せたい場合どうすればよいのか教えていただければありがたいです。スマホは現在の状態で満足しています。よろしくお願いいたします。

jpgファイルをアップできなかったのでリンクで失礼します

https://cdn.shopify.com/s/files/1/0739/1589/1991/files/testss222.jpg?v=1682488234

https://cdn.shopify.com/s/files/1/0739/1589/1991/files/testss223.jpg?v=1682488234

2

エアスマ様

ご質問を確認いたしました。

画像を見たところ、スマホにもcssが効いてしまっているため、

PCのみに適用されるようにしたいとの質問を想定して回答します。

cssにはブラウザのサイズによってスタイルを変更することが可能になります。

具体的には、以下のコードで調整します。

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合読み込む　*/
    ここにスマホ時のcssを入力
}
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    ここにPC時のcssを入力
}

この場合、ブラウザの幅が0~767pxの時は上の{}内の処理が使用され、768px以上の時は下の{}に記載したcssの処理が行われます。

上記を参考に、PCの時のみに適用されるcssを書かれると良いかと存じます。

参考：https://knowledge.cpi.ad.jp/tech/mediaquery/

ブラウザごとに厳密に処理を分けたい場合は、

javascriptを使用して処理を分ける必要があるので、参考のURLを貼っておきます。

https://blanche-toile.com/web/javascript-useragent-browser

ご参考までに。

フルバランス 園畑