[Resolved] page header position doesnt change

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anton Samarin]

Tom, I found another problem. See responsive behavior http://7nov.ru/2.png az I understand right border of padding must be more to the right.

[Tom]

Here you go:

@media (max-width: 768px) {
    .blog .page-header-content {
        margin-right: 0px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anton Samarin]

Now everithing is perfect! Thank you!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[tenchystryder]

This is a great little hack.

I have also added it this week to my site below, however, using the Simple Custom CSS plugin you must make sure your right border is equal to element padding within themes customiser.
I have also added border to match containers.

.blog .page-header-content {
    margin-bottom: 20px;
    margin-right: 15px;
    margin-top: 0;
    border-style: solid;
    border-color: #a09696;
    border-width: 4px;
}

I also never used the code below and it seems fine without it. The PHP script was added using the snippets plugin. This plugin seems to be getting regular updates. I have not touched functions php file.

@media (max-width: 768px) {
    .blog .page-header-content {
        margin-right: 0px;
    }
}

I am sure an option to move items next to sideback would make a cracking update to future GP update Tom 🙂

Tenchy Striker Website

[tenchystryder]

As an example, this is what happens if custom css is 15px and you change element spacing (seperating space) to 20px

[Tom]

So if you adjust your custom CSS to the number you have set as your separating space, it doesn’t match up properly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[tenchystryder]

No Tom, only if they are not equal.
Image issue above happened when I set custom css value to 20px but the seperating space in elements was 15px. Then I got the offset problem. Only happened with that container (the slider). All other areas were fine.

So long as the values are equal in both custom css and sperating space …. it’s fine.

My Website is set equal in both now and is running ok on both pc and mobile device.

Excuse the messy site, still work in progress. 🙂

[Tom]

Ah yea, you’ll need to match the two. GP does a lot of the matching for you, but since this is custom CSS, you need to be sure to match it whatever you have set as the separating space.

Site’s looking great! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anton Samarin]

Hi, Tom! I try to adjust page header position for another site http://historiosophy.ru but css doesnt work at all. It doesnt change anything. The problem is top margin http://historiosophy.ru/Screenshot_2.png Please help! )))

[Anton Samarin]

Solved – Container: full width )))) Thank you fore a great theme!

[Leo]

Glad you found the solution!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts