Skip to main content
T
timothyi34297763
Inspiring
December 18, 2018
Question

Media Queries, changing image layout for smart phones

  • December 18, 2018
  • 3 replies
  • 4530 views

I have a website with two columns. The left is text, the right are images. It looks great on a desktop, however, on a smart phone, the 2 columns collapse and merge into one with the left on top and the right on the bottom due to a media query at 480. The problem is that I have 5 images stacked up on top of each then and it doesn't look good. It's better to separate the images in between paragraphs and the like. How can I change the image layout with a media query so they are placed in between paragraphs and not stacked on top of each other, looking dumb.

Here is a video.

Media Query Dream Weaver Change Image Layout - YouTube

Here is image of site showing two column layout, text on left, images on right.

    This topic has been closed for replies.

    3 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 21, 2018

    This topic has had a successful result and shall be marked as assumed answered. Further posts have been way off-topic which has resulted in locking the topic. If you, as the OP, has a problem with that, please PM me and the actions will be reversed.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      O
      osgood_
      Legend
      December 18, 2018

      Use a simple script to get the width of the device browers window and then serve the images accordingly. Below is a a simple example. At 480 and below the images are inserted AFTER each paragraph - dispersed wthin the text column. At 480 and above the images are shown to the right. You need to refresh the browser if you are testing viewing on desktop but in real-time it will work on mobile as no-one pulls the window.

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="UTF-8">

      <title>Serve Images</title>

      <style>

      img {

      max-width: 100%;

      }

      .col_wrapper {

      display: flex;

      flex-wrap: wrap;

      width: 70%;

      margin: 0 auto;

      }

      .right_col, .left_col {

      width: 50%;

      }

      @media screen and (max-width: 480px) {

      .col_wrapper {

      width: 90%;

      }

      }

      @media screen and (max-width: 480px) {

      .right_col, .left_col {

      width: 100%;

      }

      }

      </style>

      </head>

      <body>

      <!-- jQuery library -->

      <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

      <script>

      $(document).ready(function(){

      if ($(window).width() < 480) {

      $('.right_col').hide();

      $("<img src='https://source.unsplash.com/1600x900/?nature,water'>'").insertAfter(".first");

      $("<img src='https://source.unsplash.com/1600x900/?nature,trees'>'").insertAfter(".second");

      $("<img src='https://source.unsplash.com/1600x900/?nature,leaves'>'").insertAfter(".third");

      }

      else {

      $('.right_col').html("<img src='https://source.unsplash.com/1600x900/?nature,leaves'><img src='https://source.unsplash.com/1600x900/?nature,trees'><img src='https://source.unsplash.com/1600x900/?nature,water'>'");

      }

      });

      </script>

      <div class="col_wrapper">

      <div class="left_col">

      <p class="first">First paragraph</p>

      <p class="second">Second paragraph</p>

      <p class="third">Third paragraph</p>

      </div>

      <!-- end left_col -->

      <div class="right_col"></div>

      <!-- end right_col -->

      </div>

      <!-- end col_wrapper -->

      </body>

      </html>

      T
      timothyi34297763Author
      Inspiring
      December 18, 2018

      This is very interesting.

      It looks like I should break up the text where I want the images to appear into classes and then use a script like this which addresses the media query size and the two "parent column" and each of the new classes I just created, giving instructions to the images themselves how to behave when at a certain media query. I will explore this idea.

      <script>

      $(document).ready(function(){

      if ($(window).width() < 480) {

      $('.right_col').hide();

      $("<img src='https://source.unsplash.com/1600x900/?nature,water'>'").insertAfter(".first");

      $("<img src='https://source.unsplash.com/1600x900/?nature,trees'>'").insertAfter(".second");

      $("<img src='https://source.unsplash.com/1600x900/?nature,leaves'>'").insertAfter(".third");

      }

      else {

      $('.right_col').html("<img src='https://source.unsplash.com/1600x900/?nature,leaves'><img src='https://source.unsplash.com/1600x900/?nature,trees'><img src='https://source.unsplash.com/1600x900/?nature,water'>'");

      }

      });

      </script>

      Can i start using this flexwrap: wrap code now, or do I need to attach something to the css document to upgrade it somehow?

      T
      timothyi34297763Author
      Inspiring
      December 18, 2018

      Thanks for the replies. I have a few ideas to try out now.

      1. I can restructure the left and possibly right columns so it'll be easier to with edit flex wrappers.

      2. Create an different html webpage specifically for smartphone layout. Seems the most straightforward.

      3. Change the two column layout!?

      Would it somehow make it easier not to do something tricky like insert the images between the paragraphs? What If I just wanted to remove or hide  a few of them, would that be easier.

      Any resources or keywords to use for option number 2?

      pziecina
      pziecina
      Legend
      December 18, 2018

      There is probably no easy way to do this, as it all depends on -

      • The html code
      • The css layout system you have chosen
      • A combination of both html and css.

      The first one may require you to rewrite your html. The second one will depend on if you have used flexbox as your css layout system. If you have used floats then you cannot do as you wish.

      If you have used flexbox, then it is a simple matter of changing the order of the items in css using the flexbox 'order' property.

        T
        timothyi34297763Author
        Inspiring
        December 18, 2018

        I wish I knew offhand. Can you take a look by using the right click view page source code on this site.

        www.ivoryestate.com

        username: help

        password: help

        I added a user for you since the site isn't live yet.

        T
        timothyi34297763Author
        Inspiring
        December 18, 2018

        Unfortunatly you are not using flexbox, which is the only method of reordering elements, (there is css grids, but that is not feasible).

        If you do want the images to be interspaced with the text, then your best bootstrap solution would be to use bootstrap V4, as Nancy suggested. I dont know how compatible your current html is with bootstrap V4, but the best person to advise you on that would be Nancy, as she knows more about bootstrap than I do.

        Or ask Osgood for further elaboration on his jQuery method.


        Can you help me understand, I thought bootstrap were simply prepackaged bits of code. Couldn't I insert a bootstrap 4 component easily into any webpage?

        Or, by simply going in there any using the flex wrappers in my html/css layout I will be using the bootstrap 4?

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices