/    Sign up×
Community /Pin to ProfileBookmark

php and media query to alter layout

this is code I have created so far, it displays the results of a query in a 3 column responsive grid but I want to find a way of saying/ changing the layout according to device screen width say for example, devices with a screen width of more than 768px, then display in the 3 column grid.
if less than:

col-xs-9 column-xs-3

row product title product price
col-xs-12
row productdescription

[code]
while ($assocarrSetmealVariantTitles_VariantPrice = mysqli_fetch_assoc($runSql5_qry1)) {
?>
<div class=”row”>
<div class=”col-xs-12 col-sm-3″>
<p class=”setmeal_varianttitle”>
<?php echo $assocarrSetmeal[‘ItemTitle’]; ?>
</p>
</div>
<div class=”col-xs-12 col-sm-7″>
<p class=”setmeal_variantdescript”>
<?php echo $assocarrSetmeal[‘ItemDescription_LrgDesc’]; ?>
</p>
</div>
<div class=”col-xs-12 col-sm-2″>
<p class=”setmeal_variantprice”>
<?php echo $gbpformat->formatCurrency($assocarrSetmeal[‘Price’], ‘GBP’), PHP_EOL; ?>
</p>
</div>
</div>
<?php
}
[/code]

I found this block of code via https://tutbakery.com/how-to-use-media-queries-in-php/ and having applied it, I got this below:

[code]
if ($runSql5_qry1) {
if (mysqli_num_rows($runSql5_qry1) > 0) {
while ($assocarrSetmeal = mysqli_fetch_assoc($runSql5_qry1)) {
if (isset($_GET[‘width’])) {
$width = $_GET[‘width’];
if ($width <= 768) {
?>
<div class=”row”>
<div class=”col-xs-8″>
<p class=”setmeal_varianttitle”>
<?php echo $assocarrSetmeal[‘ItemTitle’]; ?>
</p>
</div>
<div class=”col-xs-4″>
<p class=”setmeal_variantprice”>
<?php echo $gbpformat->formatCurrency($assocarrSetmeal[‘Price’], ‘GBP’), PHP_EOL; ?>
</p>
</div>
</div>
<div class=”row”>
<div class=”col-xs-12″>
<p class=”setmeal_variantdescript”>
<?php echo $assocarrSetmeal[‘ItemDescription_LrgDesc’]; ?>
</p>
</div>
</div>
<?php
} else {
?>
<div class=”row”>
<div class=”col-xs-12 col-sm-3″>
<p class=”setmeal_varianttitle”>
<?php echo $assocarrSetmealVariantTitles_VariantPrice[‘MainTblMenuItem_MenuItemTitle’]; ?>
</p>
</div>
<div class=”col-xs-12 col-sm-7″>
<p class=”setmeal_variantdescript”>
<?php echo $assocarrSetmealVariantTitles_VariantPrice[‘MainTblMenuItem_MenuItemDescription_LrgDesc’]; ?>
</p>
</div>
<div class=”col-xs-12 col-sm-2″>
<p class=”setmeal_variantprice”>
<?php echo $gbpformat->formatCurrency($assocarrSetmealVariantTitles_VariantPrice[‘MainTblMenuItem_MenuItemPricePerQuantity’], ‘GBP’), PHP_EOL; ?>
</p>
</div>
</div>
<?php
}
}

}
}
}
[/code]

but it doesn’t work. any pointers, ideas, solution/ answers would be very much appreciated

to post a comment
PHP

3 Comments(s)

Copy linkTweet thisAlerts:
@ginerjmJun 05.2019 — So many divs; so may paragraphs; it's just a table no?

I know the modern way is to avoid tables but the alternative is so much coding...... oh well...
Copy linkTweet thisAlerts:
@nsathauthorJun 05.2019 — @ginerjm#1604364

put simply yes
Copy linkTweet thisAlerts:
@nsathauthorJun 05.2019 — @nsath#1604365

this is link to the page itself it helps to understand:

http://easthampriya.co.uk/test22.php

Its the set meals section at the bottom of the page
×

Success!

Help @nsath spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...