Docs

[MattHoll]

Hello.

I’m trying to edit my portfolio item so that it’s full screen.

I’ve already read a lot of answers to this question here on the forum with custom CSS and I tried that. But the width of the portfolio on the page is not changed. The images size up to fit the entire space of that portfolio, but the portfolio itself is limited to a thin band in the center of the page. I want the image gallery to spread over the entire page or at least a larger section of it instead of just being in this thin band in the center.

I am using the Band expanded demo and going from that starting point.

This is the CSS I used:

@media (min-width: 1024px){
.x-portfolio .entry-info {
width: 100%;
}
.x-portfolio .entry-extra {
width: 100%;
position: relative;
padding-top: 130px;
}
.x-portfolio .x-entry-share {
position: absolute;
top: 20px;
width: 100%;
}
}

.single-x-portfolio .x-portfolio .entry-info,
.single-x-portfolio .x-portfolio .entry-extra {
float: none;
width: 100%;
}

Thanks for any and all help.

-Matt

[Rad]

Hi there,

Thanks for writing in.

It’s because of this existing CSS,

.blog .entry-wrap,
.single .entry-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
  background-color: #dfd9c3;
}

It should be like this

.blog .entry-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
  background-color: #dfd9c3;
}

Cheers!

[MattHoll]

Hello. Thanks for the help.

When I load this CSS into the Customizer, it doesn’t change anything.

I tried loading it in Apprearance/editor into the X Theme. The X Theme style.css looks to be empty. I could not find the existing CSS you posted above in order to change it. Loading it into the editor also did nothing.

The portfolio is still only in that thin bar on the screen and not full screen.

If you can tell me where that existing CSS might be found, I’ll change it. I tried running grep -r “.blog .entry-wrap” . on the entire folder structure for the downloaded X theme and the entire folder structure for the downloaded WordPress install and cannot find that.

Thanks for any help.

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[MattHoll]

This reply has been marked as private.

[MattHoll]

This reply has been marked as private.

[Christopher]

Hi there,

The CSS code in under Customize -> Custom -> Edit global CSS, see the attachment.

Hope it helps.

[MattHoll]

Aha! Great!

That did *some* enlargement. Is there a way to get it to fill the entire width of the screen, though?

I tried increasing that number from 600px to 900px and it stayed the same size. Is this maybe constrained by some setting for the Portfolio?

Here’s where it is:

http://www.hrvatskohomebrewprvenstvo.beer/portfolio-item/769/

Thanks!

[Christopher]

Please add following code:

.single-x-portfolio .x-container.max.width.offset {
    max-width: 100%;
    width: 100%;
}
.single-x-portfolio div#comments {
    width: 80%;
    margin: 0 auto;
}
.single-x-portfolio .entry-wrap.cf {
    background-color: red;
}

Hope it helps.

[MattHoll]

Thanks. That worked, but now it’s aligned on the left. Is there a center alignment setting? I see text-align: center; for instance. Something like that to place the gallery images into the center of the page?

Sorry such a pain. Thanks for the help.

[Rad]

Hi there,

Please add this as well

.single-x-portfolio .entry-info {
    float: none;
    margin: 0 auto;
}

Cheers!

[MattHoll]

Perfect! That did the trick! Thanks!

[Lely]

You’re always welcome Matt!

Cheers.

[Author]

Posts