0

I am currently working on a website for which I have to display the different features of a product. When imagining the design, I had a very different layout for mobile and PC that would, in my opinion, be too difficult to achieve with just media queries and CSS; the layout is so different that it affects the order in which the containers are displayed.

When it came to mobile, I wanted to achieve something like this:

  • title of the feature
  • description
  • example image

All in one column, since it is a small device, so it is straight forward. For PC though, I wanted to work on a two column layout, which would have the image on the left column and the text on the right one, and switch it around for every feature. It is a bit difficult to put in words how exactly I imagined it, so here's my code and how I see it:

<div class="container-fluid">

    <!-- I use Custom Fields and get the data in a $table -->
    <?php $table = CFS()->get('features'); ?>

    <!-- I work my way through all the table fields -->
    <?php for ($i = 0; $i <= $count; $i++): ?>

        <!-- Here I imagine some sort of way to check if the user is on mobile -->
        <?php if ($isMobile): ?>

            <!-- The layout for mobile -->
            <div class="row mb-5">
                <div class="col-12">
                    <h2 class="mb-3"><?= $table[$i]['features-title']; ?></h2>
                    <p><?= $table[$i]['features-text']; ?></p>
                    <img src="<?= $table[$i]['features-img']; ?>" alt="Example">
                </div>
            </div>

        <!-- not mobile then PC layout -->
        <?php else: ?>
            <div class="row">

                <!-- Simple modulo for pictures on the left column with the text on the right column and vice versa -->
                <?php if ($i % 2 == 0): ?>
                    <div class="col-6">
                        <img src="<?= $table[$i]['features-img']; ?>" alt="Example">
                    </div>
                    <div class="col-6">
                        <h2 class="mb-3"><?= $table[$i]['features-title']; ?></h2>
                        <p><?= $table[$i]['features-text']; ?></p>
                    </div>
                <?php else: ?>
                    <div class="col-6">
                        <h2 class="mb-3"><?= $table[$i]['features-title']; ?></h2>
                        <p><?= $table[$i]['features-text']; ?></p>
                    </div>
                    <div class="col-6">
                        <img src="<?= $table[$i]['features-img']; ?>" alt="Example">
                    </div>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    <?php endfor; ?>
</div>

Ultimately, what I am trying to ask is, how can I manage to make such a different layout between mobile and PC without making it too complex through media queries and CSS? It seems to me that this would be difficult to achieve with just those, and might make the website break too easily.

I apologize if it isn't explained very well. I am not the greatest web developer and still very much learning, so any feedback on my code and answers to my question are appreciated.

3
  • This isn't really a WordPress question, but there is no foolproof way to determine whether a device is a mobile or PC, since those are not two distinct classes of devices. What should an iPad tablet display? PC probably, right? What about an iPad mini in portrait orientation? That's not as clear, is it? WordPress offers the wp_is_mobile() function, but it hasn't been updated in nearly a decade. The simplest solution would just be to output both layouts and just use CSS to hide or show the appropriate one based on screen size. Commented Aug 18, 2023 at 7:10
  • But again, this isn't a WordPress-specific question, so it's not really on topic here. I'd suggest directing your question to a more general forum, and if you get a solution you could then ask here about implementing that solution in WordPress. Commented Aug 18, 2023 at 7:11
  • @JacobPeattie Thanks for the heads up. My apologies, I forgot to mention about wp_is_mobile() and how I had looked into it and that's why I directed my question to Wordpress Dev. That's my bad. I am going to see how that solution holds and perhaps have my question elsewhere, thanks!
    – almecin
    Commented Aug 18, 2023 at 7:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.