Portfolio items squashed to one side (Pro)

[lisacole1]

HIya, I’m starting to use the portfolio to set up affiliates - I started with X but it looks a bit weird https://www.less-stuff.co.uk/portfolio-item/x-the-theme/

any ideas appreciated.

And can I change the text SKILLS and ‘Share this project’ ?

thank you!

[thai]

Hi There,

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

I could see that you’ve hidden the portfolio featured images by the custom CSS. You should also increase the width of portfolio content as well. Please add this custom CSS:

.single-x-portfolio .entry-wrap {
    width: 100%;
}

@lisacole1

And can I change the text SKILLS and ‘Share this project’ ?

These texts can be changed under Theme Options > Portfolio > Labels:

Hope it helps

[lisacole1]

@thai

.single-x-portfolio .entry-wrap {
width: 100%;
}

you genius! that is just perfect.

Is it possible to have the featured image back for just the portfolio items and not for posts and pages please?

Did there used to be a way to have buttons instead of the drop down search? Or if not, can I make the text under ‘filter by category’ bolder? All / Nicer Homes/ Website Design/ Zero Waste

https://www.less-stuff.co.uk/products-tools/

also, can I stop the images cropping please? and have them in a masonry grid

[thai]

@lisacole1

Is it possible to have the featured image back for just the portfolio items and not for posts and pages please?

Hi There,

Please find this custom CSS:

.single-post .entry-featured, .entry-featured, .page .entry-featured {
    display: none;
}

And change to this:

.single-post .entry-featured,
.page .entry-featured {
    display: none;
}

@lisacole1

there used to be a way to have buttons instead of the drop down search? Or if not, can I make the text under ‘filter by category’ bolder? All / Nicer Homes/ Website Design/ Zero Waste

That’s the default style of Ethos stack: http://demo.theme.co/ethos-1/. To make the filter texts BOLD, please add this custom CSS:

ul.x-portfolio-filters-menu.unstyled a {
    font-weight: bold;
}

@lisacole1

also, can I stop the images cropping please? and have them in a masonry grid

Please take a look at this ticket: https://theme.co/apex/forum/t/stop-images-losing-quality-as-featured-image/2059/6?u=thai.

Hope it helps

[lisacole1]

that is much better, thank you so much.

I have added that code but I still don’t see the images as full size, they are cropped, despite that being deselected in the customiser.

To clarify, I want the featured image to be show in full on this page. thanks!

Products and tools I recommend - less stuff - little actions towards a better...

[nabeel]

Hi again,

Please add the following code in the Theme Options > CSS:

.x-iso-container.cols-3 .entry-cover {
    padding-bottom: 100%;
}

Let us know how this goes!

[lisacole1]

@Nabeel

.x-iso-container.cols-3 .entry-cover {
padding-bottom: 100%;
}

thank you but they are still cropping

[paul.r]

Hi,

Entry Cover are set to Cover which means to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. You can change it to contain but there will be areas that will be not covered by the image.

You can try this code.

.x-iso-container.cols-3 .entry-cover {
     padding-bottom: 100%;
     background-size:contain !important;
}

Hope that helps.

[lisacole1]

@paul.r

.x-iso-container.cols-3 .entry-cover {
padding-bottom: 100%;
background-size:contain !important;
}

That is kind of better, but will it not work so that the whole image is shown, with no borders? Thanks for your help! I really appreciate it.

[thai]

Hi There,

Did you mean to remove the black background color on both sides of images?

Please update the previous CSS to this:

.x-iso-container.cols-3 .entry-cover {
    padding-bottom: 100%;
    background-size: contain;
    background-color: transparent;
}

Hope it helps

[lisacole1]

@thai

.x-iso-container.cols-3 .entry-cover {
padding-bottom: 100%;
background-size: contain;
background-color: transparent;
}

nope, that is still containing them in a square, I’d like them to find their own size, with no white or black background.

[christian]

Hey @lisacole1,

Regretfully, your request is not spatially possible. You see, Ethos’ grid container is fixed to square. There isn’t an option to change that because that is the stack’s design.

If we set the image to cover, that will cover the square and cut off parts of your image. If we set it to contain, white bars will show. The only solution that would cover the square while showing all parts of your image is to squish the image which I believe you would not want because the image would equally look bad.

Ethos archive display is not the right choice for this case as you would need a Masonry design like in the Integrity Stack. It’s also possible with one of the bundled plugins (Essential Grid or The Grid)

Thanks.

[lisacole1]

thank you, if I change stack on a pro site what will happen?

[Alaa]

Hi @lisacole1

I’m not sure if I can understand your question correctly, but in general what will happen in Pro is the same as X theme, as Pro also has its custom stack designs, which you can apply from (Theme Options > Stack) and see the new styles being applied on your site.

Thanks.

[lisacole1]

thank you, if I change stack will I lose customisation I have in the CSS area? Can I just copy and paste it in again?

[thai]

Hi There,

All the customization and your custom CSS will be safe!

Regards!