3

I'm setting up an email which contains in the body a picture and some text. On normal computer screens the image is to the left and the the associated text to the right (using inline-block). This looks like so:

enter image description here (https://www.flickr.com/photos/183424995@N08/48518551371/in/dateposted-public/)

When the screen size is changed ie. for an i-phone, I'm aiming to get the text to move underneath the image and rather than just having a width of half the screen (as it's inline-block), to take up the whole width of the screen underneath.

What I'm trying to get: enter image description here https://www.flickr.com/photos/183424995@N08/48518549646/in/dateposted-public/

What is actually happening: enter image description here https://www.flickr.com/photos/183424995@N08/48518724692/in/dateposted-public/

I've created a "main" div containing the image div, and a div containing the text, both inline-block. The "main" div has a width set to 100% and the text div has a min and a max div so it can move from next to the image to under the image depending on screen width.

I've tried rejigging the max width of the text div to be wider, but then the text never remains to the side of the image. And I'm trying to avoid floating anything. I can't use bootstrap or flexbox as it's an email so am limited to fairly basic CSS.

The JSFiddle is https://jsfiddle.net/cfn76vqz/ to show what kind of responsiveness I have so far. And the general HTML structure is as below.

<div id="main">
  <div id="left">
    <div >
      <img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
    </div>  
  </div>
  <div id="right">
    <div >
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    </div>  
  </div>
</div>

TLDR: I'm stumped on how to make the text div essentially be 100% of the width if underneath the image but also 50% if there's space to have it to the side of the image. As far as I understand it's always going to be limited to 50% as it's part of an inline-block section.

peteredhead
  • 2,394
  • 1
  • 15
  • 21
Libby Cosedge
  • 31
  • 1
  • A few answer have mentioned viewports, however this just recreates the problem. If I use vw on width then when on a larger screen the text will not revert to be to the right of the 'image' and instead stays at the bottom. – Libby Cosedge Aug 12 '19 at 10:46
  • You will need to use `@media` queries for this. `vh` and `vw` units will not help you here. – disinfor Aug 12 '19 at 13:13

2 Answers2

1

Because you set width with this why it's not fully of width

  max-width: 50%;

So... How we can do

We need to use FLEX display like this

#main {
  /*---HERE---*/
  display: flex;
  flex-wrap: wrap;
  /*----------*/
  background: yellow;
  width: 100%;
}

#left {
  background: orange;
}

#right {
  /*---HERE---*/
  flex-basis: 0;
  flex-grow: 1;
  min-width: 50%;
  /*----------*/
  background: green;
  vertical-align: top;
}
<!-- YOUR OLD CODE -->
<div id="main">
  <div id="left">
    <div>
      <img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
    </div>
  </div>
  <div id="right">
    <div>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    </div>
  </div>
</div>

if you want to learn about flex ...more here

I'm Limit
  • 889
  • 5
  • 18
0

you can use viewport units like width: 100vw and height: 100vh for make it responsive depending upon height and width of display.click here

sanjay boricha
  • 11
  • 1