Docs

[Lobsterass]

Hi!

I would like to change the layout on all portfolio single pages in Renew. I would like to have one very tall image that is either 1448 px or 1770 px wide, so the page needs to be fullwidth. Basically, what I’m asking for is for the portfolio singles to behave just like “normal” pages. Please see attached image of this. Could you please give me the css for this?

http://dev.monroedesign.se/projekt/sodra-stations-naprapatklinik-5

<3

[Paul R]

Hi,

Kindly re-upload your screenshot so we fully understand what you are trying to achieve.

We can utilize the portfolio featured image for this.

Please add this in Custom > Edit Global Javascript in the customizer

jQuery(function($) {
   $('.single-x-portfolio .entry-featured').insertAfter('.single-x-portfolio .x-header-landmark');
});

Then add this in Custom > Edit Global CSS

.single-x-portfolio .entry-featured {
    width: 100% !important;
    display:block !important
}

.single-x-portfolio .entry-featured .entry-thumb {
    display: block !important;
}

Hope that helps

[Lobsterass]

Hi!

Oh, sorry, here is my image for what I’m trying to achieve. Should I still use the java and css above?

Thanx!

<3

[Nico]

Hi There,

You could try the suggested code above. Let us know how it goes.

Thanks.

[Lobsterass]

Hola!

Thanx!

OK, so I’ve moved stuff around a little. Could you please tell me how to make the .entry-thumb img the size of the grid (1170px wide) when set to 100% size? It’s too big now. Please see attached image of what I’m trying to achieve for my product entry pages.

http://dev.monroedesign.se/projekt/sodra-stations-naprapatklinik-5/

<3

[Rue Nel]

Hello There,

Please find and update your custom css code and use this instead:

.single-x-portfolio .entry-featured {
    width: 100% !important;
    max-width: 1170px;
    margin: 30px auto 0;
    display: block !important;
}

And you will set the maximum image size to 1170 pixels only. You should be having a layout like this: http://prntscr.com/brcyiu

Hope this helps.

[Lobsterass]

Hi!

I’m not sure if I understood this right because that made the .entry-featured almost disappear. I would like the .entry-featured to be 1170 px wide and 720px tall. Please see attached screengrab.

[Rupok]

Hi there,

It’s because you have the below code as well that’s hiding the featured image :

.entry-featured .entry-thumb {
  display: none !important;
}

Kindly remove this to get expected result. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[Lobsterass]

Oh, right! That was the first piece of CSS i wrote in Cornerstone. The first 2 weeks with the live customizer were pretty confusing. Thanx for pointing that out.

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts