Orvis theme – Project page text change

• 

  fleurdelelie · Member · Nov 7, 2016 at 1:10 pm

  • Copy link
  • Add topic to favorites

  Hi there!

  I am using the Orvis theme. When looking at a project page the part for the text is very narrow (an example: https://fleurdelelie.wordpress.com/portfolio/citrus-tea-cake-2/). Could someone please make a code to make the text either wrap around the picture (beneath it) or to make the text part of the page wider and that of the picture part narrower?

  Using the image alignment feature as detailed in this guide here: https://en.support.wordpress.com/images/image-alignment/ doesn’t work, because all it does is make the picture smaller and float it to the right. The text box stays the same size. Thus, I need help with customization with CSS. I would very much appreciate some assistance with that code! Thank you very much.

  Sincerely,
  Ina

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

• 

  innisfreehomestead · Member · Nov 7, 2016 at 9:34 pm

  • Copy link

  Hello there!

  Dropping this code in your custom CSS area should do the trick:

  .portfolio-content {
  	width: 50%;
  }
  
  .portfolio-media {
  	width: 50%;
  	padding-left: 20px;
  }
  
  @media screen and (max-width: 895px) {
  	.portfolio-content {
  		width: 100%;
  	}
  	.portfolio-media {
  		width: 100%;
  		padding-left: 0;
  	}
  }

  Let me know if that doesn’t work!
  Sage

• 

  fleurdelelie · Member · Nov 17, 2016 at 10:50 am

  • Copy link

  Hi,

  Thank you. I will give it a try.

  Cheers,
  Ina

• 

  fleurdelelie · Member · Nov 17, 2016 at 3:25 pm

  • Copy link

  Hi Sage,

  Thanks a lot for the info. It now looks great for the project page but i run into the problem now that on the frontpage (portfolio) it has shifted the pictures down. Is it possible somehow that the code you posted doesn’t impact the frontpage or that the text is on the bottom?

  Kind Regards,
  Ina

• 

  innisfreehomestead · Member · Nov 17, 2016 at 7:32 pm

  • Copy link

  Hi there!

  Sorry about that, would you mind replacing the code with the code below and seeing if that works better?

  .single .portfolio-content {
  	width: 50%;
  }
  
  .single .portfolio-media {
  	width: 50%;
  	padding-left: 20px;
  }
  
  @media screen and (max-width: 895px) {
  	.single .portfolio-content {
  		width: 100%;
  	}
  	.single .portfolio-media {
  		width: 100%;
  		padding-left: 0;
  	}
  }

  Hope that helps,
  Sage