Change layout of portfolio page

[mattkutz]

Is there a way to change the layout of a portfolio item page so that the content is on the left and the image is on the right instead of the image being on the top and the content being below it?

[jade]

Hi there,

This should be done by adding some custom CSS depending on the stack’s layout.

Would you mind providing the URL of your site so that we can check it?

[mattkutz]

https://carolcustomdesign.com/portfolio-item/amazonite/
Using integrity stack.

[Prasant]

Hello @mattkutz,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.single-x-portfolio .entry-featured {
    width: 49%;
    float: right;
}

.single-x-portfolio .entry-wrap {
    float: left;
    width: 49%;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[mattkutz]

Wow, I didn’t expect it to be that simple. Thank you. Next time I should look into the CSS more. I didn’t realize how much wordpress layouts are all just tweaking css. I thought I would have to do something more in depth. Thanks again for the resources as well.

EDIT: The only problem with that code is that when you shrink the screen down, I would expect the image to go under the content. What would be the best way to have it do that automatically?

[ruenel]

Hey There,

To make sure that the featured image and the portfolio item content will collapse and stacked each other in smaller screens, you may update the code and use this:

@media(min-width: 980px){
  .single-x-portfolio .entry-featured {
    width: 49%;
    float: right;
  }

  .single-x-portfolio .entry-wrap {
    float: left;
    width: 49%;
  }
}

We would loved to know if this has work for you. Thank you.

[mattkutz]

You guys rock! Such fast response and works like a charm. Thank you.

[nico]

Hi @mattkutz,

Happy to hear that.

Feel free to ask us again.

Thanks.

[emwillett]

@nico

This was great! The only problem I ran into was that I have this extra space after the content where I think the social media links would go if I had them turned on. How do I remove that?

[Prasant]

Hello @emwillett,

Thanks for updating the thread.

I am not quite sure which spacing you are referring too but please try replace the code that @RueNel gave you with following. Over here, I have just added one more line of CSS.

@media(min-width: 980px){
  .single-x-portfolio .entry-featured {
    width: 49%;
    float: right;
  }

  .single-x-portfolio .entry-wrap {
    float: left;
    width: 49%;
    padding-bottom: 20px;
  }
}

Thanks.

[emwillett]

Hi @prasant

I updated my code to reflect what you have but I am still encountering a white space that I’m thinking is maybe created by the social media space? I’ve attached screenshots of the white space. I haven’t changed the code on the content-portfolio.php file.

How can I get rid of that white space?

[nabeel]

Hi again,

Are you referring to the white space under the title? If that’s the case then try adding the following code as well:

.single-x-portfolio .entry-wrap .entry-content {
    margin-top: 0;
}

I tried to find out your site but I see you’re developing your site locally that’s why I couldn’t check the page.

Let us know if this helps!

[emwillett]

Hi @Nabeel I’m referring to the white column of space to the right of the title and content. I can’t figure out why that space is there vs. the portfolio info taking up the full block. How can I adjust this?

Thanks!

[Prasant]

Hello @emwillett,

Thanks for updating the thread.

Actually this should have been communicated earlier and I am really sorry for that, but would you mind creating a new ticket and share the message in that. You can give the reference to this ticket. I see that you didn’t created this ticket, it’s causing bit of confusion and thereby slowing down the response time.

Please create a new ticket and give reference to this ticket in the same. Someone from support team will take it up and help you.

Thanks for understanding.