Docs

[careylovelace]

Hi All,

I have a portfolio page: http://loosechangeproductions.org/new/team/ which is following the mosaic format and was hoping to get some help on css code to have all of the 6 items be in 1 row taking up the global width of the page. We’ve noticed there’s a huge difference between a text page and a portfolio page width. Ultimately, I’d like to all of the items fit across in one row without a mosaic effect just have it inline.

Secondly, there’s another portfolio page: http://loosechangeproductions.org/new/projects/ displaying our projects. This page shares code with our team portfolio page which adjusts the size of featured items. What would be the code to have this page adjusted by itself ?

Thank you ! I appreciate your help …

Carey

[Rue Nel]

Hello Carey,

Thanks for writing in! This issue happened because you have added a custom css:

@media (min-width: 979px){
  .page-template-template-layout-portfolio .x-container.max.width.offset {
    width: 40%;
  }
}

I would highly suggest that you update your code and make use of this code instead:

@media (min-width: 979px){
  .page-template-template-layout-portfolio .x-container.max.width.offset {
    max-width: 800px;
  }
}

Feel free to change the maximum width according to your desired width. This would allow you to adjust the masonry grid automatically on its own according to the window width.

Hope this helps.

[careylovelace]

Hi Rue Nel,

This works but doesn’t solve my issue of wanting all of the permalink items to be in one row across.
In addition, my second question for separate control for resizing items of my projects portfolio page.

Thank you …

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width: 979px) {
.page-template-template-layout-portfolio .x-container.max.width.offset {
    width: 90% !important;
    max-width: 1500px !important;
}
}

@media screen and (min-width: 1200px) {
.page-template-template-layout-portfolio .x-iso-container.cols-4>.hentry {
    width: 15% !important;
}
}

Let us know how this goes!

[careylovelace]

Thank you so very much … Yes this code works for the Team’s portfolio page: ( http://loosechangeproductions.org/new/team/ ).

I’m still waiting on an answer on the second issue I have with another portfolio page. http://loosechangeproductions.org/new/projects/ , which displays our projects. This page I need to be able to adjust the size of featured items, but page specific. What would be the code to have this page be adjusted completely separate from the other portfolio page I have?

[Joao]

Hi There,

Please add the code below and change the values according to your wishes, this code will be targeting just the specified paege.

@media screen and (min-width: 979px) {
.page-id-117.page-template-template-layout-portfolio .x-container.max.width.offset {
    width: 90% !important;
    max-width: 1500px !important;
}
}

@media screen and (min-width: 1200px) {
.page-id-117.page-template-template-layout-portfolio .x-iso-container.cols-4>.hentry {
    width: 15% !important;
}
}

Hope that helps,

Joao

[careylovelace]

Thank you for getting back to me so soon ! It all works the way we need it to be

You’re support team is great !

Carey

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts