Step Excerpt Text Wrapping Around Thumbnails

• 

  muslimahcoaching · Member · Mar 17, 2017 at 7:03 pm

  • Copy link
  • Add topic to favorites

  Hi,

  On an iPad, for my blog roll, the text excerpt wraps around the thumbnail image and there are words/sentences falling below it. I would like the text to remain in a block and the image to be at its side without any wrapping. Is there a code for this?

  This is not a problem on mobiles or desktops – just pads it seems.

  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 17, 2017 at 9:37 pm

  • Copy link

  Hi, add this to the bottom of your custom CSS and let me know what you think.

  @media screen and (min-width: 768px) {
  	.blog .entry-summary {
  		width: calc(100% - 230px);
  		float: right;
  	}
  }
  @media screen and (min-width: 840px) {
  	.blog .entry-summary {
  		width: calc(100% - 250px);
  		float: right;
  	}
  }
  @media screen and (min-width: 960px) {
  	.blog .entry-summary {
  		width: calc(100% - 200px);
  		float: right;
  	}
  }
  @media screen and (min-width: 1080px) {
  	.blog .entry-summary {
  		width: calc(100% - 230px);
  		float: right;
  	}
  }
  .blog .entry-meta {
  	text-align: right;
  }
  .blog .entry-header .entry-meta {
  	text-align: left;
  }

• 

  muslimahcoaching · Member · Mar 18, 2017 at 9:05 am

  • Copy link

  Hi Sacred Path,

  It worked well on the iPad but then with my desktop/laptop version it made the entire excerpt go under the pic to the right and there was a huge white space left. Is there any way to fix that?

  Maybe I can just have the code of how to make the date and the ‘leave comment’ to the right. That may make it look a bit neater than the way it is now.

  Thank you.

• 

  thesacredpath · Member · Mar 20, 2017 at 6:18 pm

  • Copy link

  Ah, missed one when the image gets wider on wider screens. Use the following instead, which includes one more Media Query. In my testing it seems to keep the content to the right of the image at all widths.

  @media screen and (min-width: 768px) {
  	.blog .entry-summary {
  		width: calc(100% - 230px);
  		float: right;
  	}
  }
  @media screen and (min-width: 840px) {
  	.blog .entry-summary {
  		width: calc(100% - 250px);
  		float: right;
  	}
  }
  @media screen and (min-width: 960px) {
  	.blog .entry-summary {
  		width: calc(100% - 200px);
  		float: right;
  	}
  }
  @media screen and (min-width: 1080px) {
  	.blog .entry-summary {
  		width: calc(100% - 230px);
  		float: right;
  	}
  }
  @media screen and (min-width: 1380px) {
  	.blog .entry-summary {
  		width: calc(100% - 300px)
  	}
  }
  .blog .entry-meta {
  	text-align: right;
  }
  .blog .entry-header .entry-meta {
  	text-align: left;
  }

• 

  muslimahcoaching · Member · Mar 21, 2017 at 11:25 am

  • Copy link

  Thanks. Looks great.

• 

  thesacredpath · Member · Mar 22, 2017 at 12:43 am

  • Copy link

  Awesome, and you are welcome!