Pro Theme Portfolio Layout has Featured Image Larger than Content

Somehow after upgrading and updating into Pro, the layouts of the portfolios has been different.

The whole supposed content was the one on the right panel, but it has been reduced into just a column. I’ve already checked my page’s settings and made sure it was “Full Width” but the featured image still consumes the space.

How should this be fixed? Portfolio pages used to be full width and did not have the buttons at the top.

Hi there,

Thanks for writing in! Please add the following code in the Theme Options > CSS:

.single-x-portfolio .entry-wrap {
    float: none;
    width: 100%;
}
.single-x-portfolio .entry-featured {
    float: none;
    padding-right: 35px;
    width: 100%;
}
.single-x-portfolio .entry-featured img {
    width: 100%;
}
.single-x-portfolio .entry-parent {
    display: none;
}

Let us know how this goes!

Thank you for your reply. It certainly is better now like this:

However, is there a way to remove the featured image and turn it to the way it was in the past like this:

This screenshot is from a different test site we use, that is on X Child Theme X with Cornerstone instead of Pro.

Hi There,

To remove the featured image, please update the previous CSS to this:

.single-x-portfolio .entry-wrap {
    float: none;
    width: 100%;
}
.single-x-portfolio .entry-parent,
.single-x-portfolio .entry-featured {
    display: none;
}

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.

Thank you for your reply. I am good with CSS, thank you. Unfortunately your code did not work. The featured image/thumbnail was not removed, and the page did not return to ‘full width’ as shown in my previous reply’s example image.

Is that functionality in Pro or is it only for X/X-child theme?

Hey @dobacco,

Let me first add some info here as to why you’re seeing a large feature image in the first place. What you’re seeing is the Portfolio Item design of the Ethos stack (see http://demo.theme.co/ethos-1/portfolio-item/sierra-farm/). There is no option to change that so you’ll need custom CSS.

I’ve tested @thai’s code and it should work:

There’s probably a syntax error in your CSS that is why it doesn’t work in your end. You can check your custom CSS in http://csslint.net/.

I’m not sure how you achieved that layout you had before since that is not offered in the theme. Please provide the details on how you did that so maybe we can lead you to the right direction. Also provide the URL of your portfolio page.

Thanks.

Thank you for the reply.

The image I provided is on a test site that is using X Child Theme. The stack is still Ethos and is made via Cornerstone. Our main site used to have X Child Theme, but after updating it, the permissions got reset and the X Options disappeared as well as permissions, and we thought we would have to upgrade to Pro to get it back, and so we are running pro at the moment.

Here is the link to our portfolio and everything else that is of the same problem:

Hello @dobacco,

Thanks for updating the thread.

Can you please try clearing cache as on my end I see the changes getting reflected in Portfolio page. Along with that I see that website is loading pretty slow and the page load time is on the higher side of the spectrum. To optimize the page load time, please take a look at our performance optimisation guide.

Thanks.

Hello,

Thank you for your reply. I will read through the performance customization article and apply them.

As for the page, I would like the portfolios to be in full-width as sampled here: (Using Theme X/X Child theme)

Is it not possible with pro?

Hey @dobacco,

That is not possible out of the box with X / Pro Portfolio without modifying the theme so I’d recommend that you do that using a Page and use a Blank No Container page template. You can then use one of our bundled grid plugins to display your list of portfolio or portfolio showcase instead of the theme’s Portfolio template. You can choose to use either the Essential Grid or The Grid.

I’ll give you a custom code now to make your page look like this:

Please add this code in Theme Options > CSS.

.single-x-portfolio .main.x-container.max {
    width: 100%;
    max-width: 100%;
}

Please note that we do not have support for custom code so you will need to hire a web developer in case of issues.

Thank you for understanding.

It is possible, @dobacco. Theme structure might changed as improvements get introduced. This is why we could not continue on custom written codes because they are not maintainable by us, the support staff.

This is why I recommend the use of native theme features. For custom codes, it is recommended that you understand how they work to maintain them or hire a third party developer to fix issues that arise or for further enhancement.

Thanks.

Hey @dobacco,

I accidentally pressed the edit button instead of reply so you’re question was deleted. Sorry about that.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.