Docs

[Marc O]

Hi,

This is simply a “nice to have”, not so much a “must have” request.

I love how FastCo overlays titles of articles on top of the header image.
See here and here.

My site has the same set up for project pages, header up top and then a centered column of text below. See here and here.

Is there anyway to move up the text box underneath the main header image up enough to achieve the same look as FastCo? Is there code I can insert in the text box to move it up/over the image?

Thanks.

[Rue Nel]

Hello There,

Thanks for writing in!

To move up the text box underneath the main header image up enough to achieve the same look as FastCo, simply edit your page and find the content band that needs to move up. Edit your content band settings and add a custom moveup class. After that, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-content-band.moveup {
    margin-top: -180px;
}

.x-content-band.moveup .x-container{
    background-color: #fff;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

When the class and css is properly placed, your page should look like this:

Please let us know how it goes.

[Marc O]

Thanks. It works!

Using your example/screen shot, is there anyway to make the container box wider, so the text in that box aligns with the smaller text in the container box below?

Thanks.

[Rue Nel]

Hello There,

Please replace the code above with this code instead:

.x-content-band.moveup {
    margin-top: -180px;
}

.x-content-band.moveup .x-container{
    background-color: #fff;
    width: 100%;
    max-width: 1150px;
    padding-left: 5%;
    padding-right: 5%;
}

Let us know if this has been helpful to you.

[Marc O]

Cool. That definitely worked.

I tested one page and then viewed it on my mobile device. Seems like the top container box, since it is now moved up, is blocking my header image.

Is there anyway to avoid this happening on smaller screens?

Thanks.

[Rupok]

Hi there,

Thanks for updating. You can write your CSS for mobile device with media query –

@media only screen and (max-width: 767px) {

//write your CSS here, it will work on mobile device only

}

However if you can’t do it yourself, would you please clarify the issue with a screenshot?

Thanks

[Marc O]

This reply has been marked as private.

[Rue Nel]

Hello There,

Please replace the previous code we gave you with this code instead:

@media only screen and (max-width: 979px) {
  .x-content-band.moveup {
    margin-top: -180px;
  }

  .x-content-band.moveup .x-container{
    background-color: #fff;
    width: 100%;
    max-width: 1150px;
    padding-left: 5%;
    padding-right: 5%;
  }
}

Please let us know if this works out for you.

[Marc O]

Thanks.

Still does not seem to be working. As the width gets smaller, the text box cuts into the image.

I’m looking for an ideal width to make the text box overlay look good on bigger screens. Once the page gets on a smaller screen, I simply want the text box to go underneath the image, as if the code you are providing does not exits.

Is that possible?

Thanks for all the help.

[Lely]

Hello There,

Please update to this:

@media only screen and (min-width: 768px) {
  .x-content-band.moveup {
    margin-top: -180px;
  }

}
  .x-content-band.moveup .x-container{
    background-color: #fff;
    width: 100%;
    max-width: 1150px;
    padding-left: 5%;
    padding-right: 5%;
  }

Above CSS will move the text box up from 768px screen and wider but will stay on the bottom of the image on smaller screen until 767px.

Hope this helps.

[Marc O]

Great. That helps.

Although, now there is a line above the Project title/below the image (See here: https://drive.google.com/file/d/0B9ZKtwYTxXC5SFNVeDEwNDhxVFE/view?usp=sharing)

Any reason what is causing this?

Thanks.

[Marc O]

Actually, it doesn’t show up on the project pages, http://marcobrien.net/work/design-education/collaboration-for-creatives/

All good.

Thanks for all the help!

[Friech]

Glad you sorted things out, that could be a bottom border or a box-shadow of the image container.

Cheers!

[Marc O]

Hi.

I’m dusting this topic off.

After updating to the latest WP, there seems to be a problem with my site and this modification.

Visit http://marcobrien.net in Chrome. You’ll see the type in it’s regular place, NOT where it should be based on the code given/where it was before the WP update.

Although, in Safari, http://marcobrien.net looks fine.

Any thoughts on this?

[Rad]

Hi there,

Hmm, looks the same on my end. Perhap, it’s related to cache? Please clear your caches.

And you may send another screenshot for this, I’d like to see what you’re currently getting.

Thanks!

[Author]

Posts