Formatting image alignment and text for responsive design

5 Views

I’m trying to format a blog post so that it will look correct regardless of what size of screen it’s viewed on. The post is here: http://cannotdecide.com/10-must-see-documentaries-on-netflix-canada-june-2015/

The way it is currently setup, it’s disastrous as you move between browser/screen sizes.

Read More

What would be the best way to format this so that the image and text associated with each other never start before the other one, regardless of device size?

Edit:

So I have this in my CSS: 

.entry > p:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

.entry p > img{
  display: inline-block; 
  vertical-align: top; 
}

.article {
  display: inline-block; 
  vertical-align: top; 
}

And the following as my code in the post: 

<p><div class="entry"><img class="alignleft size-medium wp-image-14" style="padding: 10px;" src="http://cannotdecide.com/wp-content/uploads/2015/06/blackfish-203x300.jpg" alt="blackfish" width="203" height="300" /></div><div class="article"><strong>1. Blackfish</strong> - Explores the business of capturing and breeding orcas in captivity, including at SeaWorld, and the effects of captivity on the specifies commonly known as the "killer whale." The film focuses on Tilikum, a male orca who was captured in 1982, and features interviews with former SeaWorld trainers, marine biologists, and other experts in the field, as well as never-before-seen footage. See for yourself why Blackfish caused massive public outrage when it first aired in 2013.</div></p>

Still not having any luck. Sorry, I know this is very basic.

Post Views: 5

Related posts

4 comments

  1. You need to clear the paragraph to occupy the full width and disallow other divs to overlap it. 

    .entry p {
  clear: both;
}

    The image and text structure is irregular as well. So after adding the above, you need to have a constant structure for all the images and text to look well organised.

  2. <img src="imagename.jpg" class="img-responsive">

    use class img-responsive if you have bootstrap linked

  3. According to the source, not all <p> contains both img and the article ,example, “the inside job”.

    1) since img tag is floating to the left, you need to clear the 

    .entry > p:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

    2) make the display as inline block;

    .entry p > img{
  display: inline-block; 
  vertical-align: top; 
}

    and wrap the article in another and add add inline block to that div aswell

  4. If you can edit the content, then go to each <p> tag, which has the image in it, and add style="clear:both".

    This is not a good solution, but there is no other suggestions advisable for the current html structure.

Comments are closed.