Web Analytics Made Easy -
StatCounter Wrapping 2 columns to 1 on mobile using media queries - CodingForum

Announcement

Collapse
No announcement yet.

Wrapping 2 columns to 1 on mobile using media queries

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Wrapping 2 columns to 1 on mobile using media queries

    Hi,

    I'm new posting here so please be gentle.

    I've tried creating a new product page, with 2 columns, 1 for text and 1 for images. However on mobile it's difficult to read as the text is too small/compacted by the images.

    Ideally I'd like to wrap the image column on mobile, so that the images display below the text content, however I'm not familiar on how to do this, I've read some about media queries in CSS however not sure how to apply them in my situation as the images either appear left or right of the content each time (and this is how I'd like them on desktop/tablet).

    Any help would greatly appreciated

    Thanks,

    Ian

    Click image for larger version

Name:	mobile.jpg
Views:	1
Size:	16.9 KB
ID:	2283594

    Code:
    <div style="width:100%;height:auto;">
    <div style="background-color:#FFFFFF;width:57%;height:350px;float:left;display:flex;justify-content:center;flex-direction:column;padding-right:2%;padding-left:2%;">
    <h3>MEDION&reg; AKOYA&reg; P6659 15.6&quot; Entry Level Gaming (MD99869)</h3>
    <p>The MEDION&reg; AKOYA&reg; P6659 is the perfect companion for work and play - thanks to the powerful Intel&reg; Core&trade; i7-6500U processor with Turbo Boost Technology 2.0 and up to 3.1 GHz, Windows 10 Home and a dedicatged NVIDIA&reg; GeForce&reg; 930M graphics card which speeds up the calculations of your applications and games.</p>
    </div>
    <div style="background-color:#FFFFFF;width:37%;height:350px;float:right;display:flex;justify-content:center;flex-direction:column;padding-right:2%;"><img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-Q?$xxl$" alt="Speaker" align="middle" style="max-width:100%;" /></div>
    <div style="background-color:#FFFFFF;width:100%;height:auto;float:left;"><hr style="border:0;height:1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" />
    </div>
    <div style="background-color:#FFFFFF;width:36%;height:350px;float:left;display:flex;justify-content:center;flex-direction:column;padding-right:2%;padding-left:2%;"><img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Dleft?$xxl$" alt="Speaker" align="middle" style="max-width:100%;" /></div>
    <div style="background-color:#FFFFFF;width:58%;height:350px;float:right;display:flex;justify-content:center;flex-direction:column;padding-right:2%;">
    <h3>Intel Core i7 Processing Power</h3>
    <p>Intel&reg; Core&trade; i7-6500U processor (2.5 GHz, with Turbo Boost Technology 2.0 up to 3.1 GHz, 4 MB Intel&reg; Smart Cache).  With the Intel&reg; Core&trade; 6th-generation processors, the standards for notebook performance have been redefined!</p>
    <p>Unleash the power of the ultra-fast processor with its superb features and take it to new dimensions in productivity and creativity. Intel&reg; Core&trade; 6th-generation processors offer the ideal conditions for you to let your imagination run wild and explore new opportunities.</p>
    </div>
    <div style="background-color:#FFFFFF;width:100%;height:auto;float:left;"><hr style="border:0;height:1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" />
    </div>
    <div style="background-color:#FFFFFF;width:57%;height:350px;float:left;display:flex;justify-content:center;flex-direction:column;padding-right:2%;padding-left:2%;">
    <h3>Windows 10 Home</h3>
    <p>This great laptop comes with Windows 10 Home preinstalled making it the ideal system for office, multimedia applications and games of all kinds. Installed on the 128GB SSD - Windows 10 Home starts in seconds!</p>
    </div>
    <div style="background-color:#FFFFFF;width:37%;height:350px;float:right;display:flex;justify-content:center;flex-direction:column;padding-right:2%;"><img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddyn-l-up?$xxl$" alt="Speaker" align="middle" style="max-width:100%;" /></div>
    <div style="background-color:#FFFFFF;width:100%;height:auto;float:left;"><hr style="border:0;height:1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" />
    </div>
    <div style="background-color:#FFFFFF;width:36%;height:350px;float:left;display:flex;justify-content:center;flex-direction:column;padding-right:2%;padding-left:2%;"><img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddyn-r-down?$xxl$" alt="Speaker" align="middle" style="max-width:100%;" /></div>
    <div style="background-color:#FFFFFF;width:58%;height:350px;float:right;display:flex;justify-content:center;flex-direction:column;padding-right:2%;">
    <h3>Graphics &amp; Sound</h3>
    <p>NVIDIA&reg; GeForce&reg; 930M graphics With 2 GB GDDR3 memory and digital HDMI&reg; audio/video output  Image- and video-editing software and games benefit from an NVIDIA&reg; GeForce&reg; GT graphics card.It not only accelerates the calculations made by your applications but also ensures entertaining moments while playing games.</p>
    <p>39.6 cm (15.6&quot;) LED backlight display with IPS technology and Full HD resolution of 1,920 x 1,080 pixels</p>
    </div>
    <div style="background-color:#FFFFFF;width:100%;height:auto;float:left;"><hr style="border:0;height:1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" />
    </div>
    <div style="background-color:#FFFFFF;width:57%;height:350px;float:left;display:flex;justify-content:center;flex-direction:column;padding-right:2%;padding-left:2%;">
    <h3>Storage &amp; Memory</h3>
    <p><strong>128 GB SSD (solid state drive) </strong>- An SSD provides ultra-fast boot times for Windows and rapid loading speeds for programs and games: simply click on the symbol and the application is ready to go!</p>
    <p><strong>1TB Hard Drive Storage</strong> - perfect for applications, games, documents, music, video and more.</p>
    <p><strong>8GB RAM</strong> - loads of memory for playing games or multi-tasking whilst hard at work.</p>
    </div>
    <div style="background-color:#FFFFFF;width:37%;height:350px;float:right;display:flex;justify-content:center;flex-direction:column;padding-right:2%;"><img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddetail-front?$xxl$" alt="Speaker" align="middle" style="max-width:100%;" /></div>
    <div style="background-color:#FFFFFF;width:100%;height:auto;float:left;"><hr style="border:0;height:1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" />
    </div>
    </div>

  • #2
    Hi there ianholloway,

    and a warm welcome to these forums.

    Try it like this...

    Code:
    [color=navy]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        padding: 1em 0;
     }
    
    .left-text-content,
    .right-text-content,
    .left-image-holder,
    .right-image-holder {
        float: right;
        width: 50%;
        min-height: 22em;
        padding: 2%;
        box-sizing: border-box;
        background-color: #fff;
     }
    
    .left-text-content {
        float: left;
     }
    
    .right-image-holder {
        width: 50%;
        padding: 2% 0;
     }
    
    .left-image-holder {
       float: left;
       width: 50%;
       padding: 2% 0;
     }
    
    .left-image-holder-hidden {
        display: none;
     }
    
    .left-image-holder img,
    .right-image-holder img,
    .left-image-holder-hidden  img {
        display: block;
        width: 100%;
        height: auto;
     }
    
    hr {
        clear: both;
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right,rgba(0,0,0,0),
                                  rgba(0,0,0,0.75),rgba(0,0,0,0)); 
     }
    @media screen and (max-width:41em) {
    .left-text-content,
    .right-text-content,
    .right-image-holder {
        width: 100%;
        min-height: 0;
        margin-bottom: 1em;
        float: none;
      }
    
    .left-image-holder-hidden {
        display: block;
        margin-bottom: 1em;
     }
    
    .left-image-holder {
        display: none;
      }
     }
    </style>
    
    </head>
    <body> 
    
    <div class="left-text-content">
     <h3>MEDION&reg; AKOYA&reg; P6659 15.6&quot; Entry Level Gaming (MD99869)</h3>
      <p>
       The MEDION&reg; AKOYA&reg; P6659 is the perfect companion for work and play - 
       thanks to the powerful Intel&reg; Core&trade; i7-6500U processor with Turbo Boost 
       Technology 2.0 and up to 3.1 GHz, Windows 10 Home and a dedicatged NVIDIA&reg; 
       GeForce&reg; 930M graphics card which speeds up the calculations of your 
       applications and games.
      </p>
    </div>
    
    <div class="right-image-holder">
     <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-Q?$xxl$" alt="Speaker">
    </div>
    
    <hr>
    
    <div class="left-image-holder">
     <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Dleft?$xxl$" alt="Speaker">
    </div>
    
    <div class="right-text-content">
     <h3>Intel Core i7 Processing Power</h3>
      <p>
       Intel&reg; Core&trade; i7-6500U processor (2.5 GHz, with Turbo Boost Technology 
       2.0 up to 3.1 GHz, 4 MB Intel&reg; Smart Cache).  With the Intel&reg; Core&trade; 
       6th-generation processors, the standards for notebook performance have been 
       redefined!
      </p><p>
       Unleash the power of the ultra-fast processor with its superb features and take it 
       to new dimensions in productivity and creativity. Intel&reg; Core&trade; 
       6th-generation processors offer the ideal conditions for you to let your imagination 
       run wild and explore new opportunities.
      </p>
    </div>
    
    <div class="left-image-holder-hidden">
    <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Dleft?$xxl$" alt="Speaker">
    </div>
    
    <hr>
    
    <div class="left-text-content">
     <h3>Windows 10 Home</h3>
      <p>
       This great laptop comes with Windows 10 Home preinstalled making it the ideal system 
       for office, multimedia applications and games of all kinds. Installed on the 128GB 
       SSD - Windows 10 Home starts in seconds!
      </p>
    </div>
    
    <div class="right-image-holder">
     <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddyn-l-up?$xxl$" alt="Speaker">
    </div>
    
    <hr>
    
    <div class="left-image-holder">
     <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddyn-r-down?$xxl$" alt="Speaker">
    </div>
    
    <div class="right-text-content">
     <h3>Graphics &amp; Sound</h3>
      <p>
       NVIDIA&reg; GeForce&reg; 930M graphics With 2 GB GDDR3 memory and digital HDMI&reg; 
       audio/video output  Image- and video-editing software and games benefit from an 
       NVIDIA&reg; GeForce&reg; GT graphics card.It not only accelerates the calculations 
       made by your applications but also ensures entertaining moments while playing games.
      </p><p>
       39.6 cm (15.6&quot;) LED backlight display with IPS technology and Full HD resolution 
       of 1,920 x 1,080 pixels
      </p>
    </div>
    
    <div class="left-image-holder-hidden">
     <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddyn-r-down?$xxl$" alt="Speaker">
    </div>
    
    <hr>
    
    <div class="left-text-content">
     <h3>Storage &amp; Memory</h3>
      <p>
       <strong>128 GB SSD (solid state drive) </strong>- An SSD provides ultra-fast boot 
       times for Windows and rapid loading speeds for programs and games: simply click on 
       the symbol and the application is ready to go!
      </p><p>
       <strong>1TB Hard Drive Storage</strong> - perfect for applications, games, documents, 
       music, video and more.
      </p><p>
       <strong>8GB RAM</strong> - loads of memory for playing games or multi-tasking whilst 
       hard at work.
      </p>
    </div>
    
    <div class="right-image-holder">
     <img src="http://medion.scene7.com/is/image/Medion/30020299_PIC-H_Ddetail-front?$xxl$" alt="Speaker">
    </div>
    
    <hr>
    
    </body>
    </html>[/color]
    coothead
    Last edited by coothead; Sep 12, 2016, 05:27 AM. Reason: tpynig eorrr
    ~ the original bald headed old fart ~

    Comment

    Working...
    X