Docs

[Paul L]

Hi, I am using the Ethos stack and need to modify my portfolio page

1.I have increased the h2 size across the site but need to target the title of the portfolio item as it is too big can you help?

2. My images on the portfolio page are being cropped how can i make the full image fit?

3. I want to change the color of the shaded bar behind the title including a different shade for hover?

See image attached

Many thanks Paul

[Rue Nel]

Hello There,

Thanks for writing in!

1] To target the title of the portfolio item, you can make use of this code:

.page .x-portfolio .h-entry-cover {
    font-size: 18px;
}

2] The image looks like it cropped because it is set as a background image of the grid box. You can add this code in the customizer, Appearance > Customize > Custom > CSS to display the whole image;

.site .x-iso-container .entry-cover{
    background-size: contain;
}

3] To change the color of the shaded bar behind the title including a different shade for hover, you can make use of this code:

.site .x-iso-container .entry-cover .h-entry-cover:before{
    background-color: red;
}

.site .x-iso-container .entry-cover:hover .h-entry-cover:before{
    background-color: blue;
}

Feel free to change the colors so that it will match with your preference. By default it is using rgba(0,0,0,0.5) as the background color.

Hope this helps.

[Paul L]

Thank you that worked!.

Is there a way to make my portfolio-item page 2 columns so it resizes for all devices?

Regards
Paul

[Christopher]

Hi there,

Please edit portfolio page and change number of columns under ‘Portfolio settings’ box.

Hope it helps.

[Paul L]

Sorry its not the portfolio page (I have that set to 4 columns) its the single portfolio page. I currently have a full size image at the top and text below. I want to have image and text side by side in 2 columns. I also need this to be responsive so it stays as two columns until its mobile view then 1 column.

Regards
Paul

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Paul L]

Thank you

This url will direct you to the page in question

http://web.boonwag.co.uk/boonwag-portfolio/b52s-bar-horsham/

Regards
Paul

[Paul R]

Hi,

In that case, please find and remove the css code that reads.

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

Thanks

[Paul L]

Thank you

I have found and removed. It looks like it gives me 70%-image & 30%-text can I change this to 50% 50%?

Regards
Paul

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.single-x-portfolio .entry-featured {
    width:50%;
}

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

You may change 50% to adjust the width, just make sure it adds up to 100%.

Thanks

[Paul L]

Thank you we are nearly there. On mobile it only fills half of the screen width?

Regards
Paul

[Jade]

Hi Paul,

Please update the code to:

@media (min-width: 797px) {
    .single-x-portfolio .entry-wrap,
    .single-x-portfolio .entry-featured {
        width:50%;
    }
}

Hope this helps.

[Author]

Posts