I'm making changes to an existing bootstrap site that uses a php array to generate product categories
tl;dr - I need to make an array of product services display differently on desktop and mobile browsers
Existing vs Modified Pages
Existing code:
<?php
$features = array(
array(
array("記事の公開・配信" , "bullhorn" , false , "ニュースリリース、ブログ記事、画像・動画などを公開・配信できます。"),
array("メール一斉配信" , "paper-plane-o" , false , "リストを作成し、それらのアドレスに記事を一斉にメール配信できます。"),
array("リリース数無制限" , "arrows-alt", false , "公開・配信できるリリースや記事の数に制限はありません。"),
array("自動SEO" , "globe", false , "記事が自動的に検索エンジン最適化され、Google検索などで上位に表示されます。"),
),
/*
array(
array("RSS配信" , "rss", true , "公開した全ての記事がRSSで配信されます。"),
array("コメント" , "comment", true , "閲覧者が記事にコメントを残すことができます。"),
array("検索" , "search", true , "ニュースルーム内を検索できます。"),
array("タグ" , "tag", true , "記事にタグをつけて整理できます。"),
),
*/
array(
array("企業プロフィール" , "info-circle", true , "お客様の企業ロゴ、所在地、連絡先などを表示できます。"),
array("Facebookニュースルーム" , "facebook-square", true , "Facebookページに「ニュースルーム」タブを追加できます。"),
array("ソーシャルメディア転載" , "share-alt", true , "YouTube、Twitter、SlideShareなどへ公開した記事を同期できます。"),
array("アクセス解析・統計" , "dashboard", true , "アクセス数、Eメール開封数など重要なデータを分かりやすく分析できます。"),
),
array(
array("埋め込みニュースルーム" , "code", true , "既存のWebサイトにニュースルームを埋め込むことができます。"),
array("デザインカスタマイズ" , "heart-o", true , "埋め込みニュースルームのデザインを自由にカスタマイズできます。"),
array("モニタリング" , "eye", true , "リリースがどんなメディアで取り上げられたかをチェック。"),
array("Google Analytics" , "tasks", true , "より詳しい解析のためにGoogle Analyticsを導入できます。"),
),
);
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="eyecatch">
<h3>お客様にあったプランを。</h3>
</div>
<div class="base-plan">
<h3>基本のニュースルーム</h3>
<div class="monthly">
<span class="unit">月</span> <span class="number">50,000</span><span class="unit">円〜</span>
</div>
<div class="yearly">
<span class="unit">年<span> <span class="number">500,000</span><span class="unit">円〜</span>
</div>
</div>
</div>
</div>
<div class="features">
<?php foreach ($features as $set): ?>
<div class="row">
<?php foreach ($set as $feature): ?>
<div class="col-sm-3">
<div class="feature <?php if ($feature[2]) { echo ' optional '; } ?>">
<div class="this-is-basic">基本機能</div>
<div class="this-is-optional">オプション</div>
<div class="icon"><i class="fa fa-2x fa-<?php echo $feature[1]; ?>"></i></div>
<h4><?php echo $feature[0]; ?></h4>
<div class="desc"><?php echo $feature[3]; ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</div>
Modified code:
<?php
$features = array(
array(
array("記事の公開・配信" , "bullhorn" , true , "ニュースリリース、ブログ記事、画像・動画などを公開・配信できます。"),
array("メール一斉配信" , "paper-plane-o" , true , "リストを作成し、それらのアドレスに記事を一斉にメール配信できます。"),
array("埋め込みニュースルーム" , "code", false , "既存のWebサイトにニュースルームを埋め込むことができます。"),
array("Facebookニュースルーム" , "facebook-square", false , "Facebookページに「ニュースルーム」タブを追加できます。"),
),
/*
array(
array("RSS配信" , "rss", true , "公開した全ての記事がRSSで配信されます。"),
array("コメント" , "comment", true , "閲覧者が記事にコメントを残すことができます。"),
array("検索" , "search", true , "ニュースルーム内を検索できます。"),
array("タグ" , "tag", true , "記事にタグをつけて整理できます。"),
),
*/
array(
array("リリース数無制限" , "arrows-alt", true , "公開・配信できるリリースや記事の数に制限はありません。"),
array("自動SEO" , "globe", true , "記事が自動的に検索エンジン最適化され、Google検索などで上位に表示されます。"),
array("デザインカスタマイズ" , "heart-o", false , "埋め込みニュースルームのデザインを自由にカスタマイズできます。"),
array("アクセス解析・統計" , "dashboard", false , "アクセス数、Eメール開封数など重要なデータを分かりやすく分析できます。"),
),
array(
array("企業プロフィール" , "info-circle", true , "お客様の企業ロゴ、所在地、連絡先などを表示できます。"),
array("ソーシャルメディア転載" , "share-alt", true , "YouTube、Twitter、SlideShareなどへ公開した記事を同期できます。"),
array("モニタリング" , "eye", false , "リリースがどんなメディアで取り上げられたかをチェック。"),
array("Google Analytics" , "tasks", false , "より詳しい解析のためにGoogle Analyticsを導入できます。"),
),
);
?>
<div class="container">
<div class="row">
<div class="eyecatch">
<h3>お客様にあったプランを。</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="base-plan">
<h3>Pro</h3>
<div class="monthly">
<span class="unit">月</span> <span class="number">50,000</span><span class="unit">円〜</span>
</div>
<div class="yearly">
<span class="unit">年</span> <span class="number">500,000</span><span class="unit">円〜</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="base-plan">
<h3>Premium</h3>
<div class="monthly">
<span class="unit">月</span> <span class="number">100,000</span><span class="unit">円〜</span>
</div>
<div class="yearly">
<span class="unit">年</span> <span class="number">1,000,000</span><span class="unit">円〜</span><span class="info"> (税別価格)</span>
</div>
</div>
</div>
</div>
<div class="features">
<?php foreach ($features as $set): ?>
<div class="row">
<?php foreach ($set as $feature): ?>
<div class="col-sm-3">
<div class="feature <?php if ($feature[2]) { echo ' optional '; } ?>">
<div class="this-is-basic">Premium Only</div>
<div class="this-is-optional">基本機能</div>
<div class="icon"><i class="fa fa-2x fa-<?php echo $feature[1]; ?>"></i></div>
<h4><?php echo $feature[0]; ?></h4>
<div class="desc"><?php echo $feature[3]; ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</div>
Everything looks fine on large & medium displays, but view the page on a small screen and the product options no longer sit underneath their corresponding category & are out of order.
Here's what I'd like to achieve, with the two green product category blocks separated & their corresponding options displayed beneath each.
Cutting my teeth on this stuff & not sure how to best move forward, so any suggestions/help are much appreciated!
Aucun commentaire:
Enregistrer un commentaire