FROM CACHE - jp_header

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

エアスマ
新規メンバー
4 0 0

毎度お世話になります。

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

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

カスタム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

 

 

  • CSS
1件の返信1

株式会社フルバランス
Shopify Partner
1508 542 677

エアスマ様

 

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

 

画像を見たところ、スマホにも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

 

ご参考までに。

 

フルバランス 園畑

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス