Styling Portfolio Posts

[webopsdpi]

Is the style of a portfolio dictated by the Stack with no styling possible?

I have used Ethos in the past and would like to use the two column layout in an Integrity site.

Here is what I want the Portfolio Posts to look like:

Currently, my Integrity Portfolio posts are one column with a VERY large picture at the top, and the text below. Is it possible to move to a Two-column layout?

[nabeel]

Hi there,

Thanks for writing around! You may try adding the following CSS code in the Theme Options > Global CSS:

@media screen and (min-width: 768px) {
  .single-x-portfolio .entry-wrap.cf, .single-x-portfolio .entry-featured {
    width: 49%;
    display: inline-block;
    vertical-align: top;
  }
  .single-x-portfolio .x-portfolio .entry-info, .single-x-portfolio .x-portfolio .entry-extra {
    float: none;
    width: 100%;
  }
}

Let us know how this goes!

[webopsdpi]

Brilliant - I’m 98% there!

Now that we have two columns, is it possible to make the white div that holds the text to be AT LEAST as tall as the photo that is on the left?
(I realize that if there was a large quantity of text, it might end up taller than the image)

The Height of the images on the left would need to vary from post-to-post.

IF HEIGHT CONTROL IS NOT AN OPTION:
How would I style the box to be transparent so that the background color (blue in my example) would be visible behind the text.

Thanks fo

[nabeel]

Hi again,

Please replace the previous code with the following code:

@media screen and (min-width: 768px) {
  .single-x-portfolio .x-portfolio {
    display: table;
  }
  .single-x-portfolio .entry-wrap.cf, .single-x-portfolio .entry-featured {
    width: 49%;
    display: table-cell;
    vertical-align: top;
  }
  .single-x-portfolio .x-portfolio .entry-info, .single-x-portfolio .x-portfolio .entry-extra {
    float: none;
    width: 100%;
  }
}

Let us know how this goes!

[webopsdpi]

Perfection!

Many, many thanks!!!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!