Troubles with Spacing

[Sebastián]

Hi im new with this theme and i have to fix something. I want to reduce the spacing between the featured image and my blog post title. Also i want to reduce the spacing between the blog post title and the preview content of each one of the posts.

Can you guys help me?
PS: I tried with the “solution” posted in the documentation but it didnt worked for me.

Attachmen0 imaget: http://i.imgur.com/SvCGXFs.png

Thanks!

GP Premium 1.2.96

[Leo]

Hi Sebastián,

Those would require some CSS. Try this:

.post-image-above-header .post-image {
    margin-bottom: 10px;
}
.entry-content {
    margin-top: 10px;
}

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

Let me know.

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

[Sebastián]

It worked. I can’t tell you how thankful I am. Thank you so much for the quick response!

[Leo]

You’re very welcome 🙂 We are always here to help!

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

[Sebastián]

Now I want to do the same with the spacing in the post page.

Attachment: http://i.imgur.com/kY1z9TI.png

What CSS should I include?

Thanks

PS: Also I would like to know something. I visited my website from different computers and the logo is placed in a different position (sometimes a little bit to the left of the “original” position” which i stablished in my computer). I want a logo that doesnt modify his position despite the resolution of the computer. I don’t know if i made myself clear its very hard to tell something when english is not your native language.

Thanks!

[Tom]

Give this a shot:

.separate-containers .inside-article .page-header-image-single {
    margin-bottom: 10px;
}

Your logo position shouldn’t move relative to the rest of your website. Can you link me to your site?

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

[Sebastián]

Thank you so much with the first problem. The CSS worked.

I want my logo like in this screenshot http://i.imgur.com/YbmiqEn.png this is the way i see it in my computer

but in some resolutions is different.

my url website in this case is: http://www.mmarketingonline.com/blog/

[Sebastián]

And another thing, when i try to access through my iphone the logo is not centered and i want it in the middle.

[Leo]

Hmm your logo looks fine to me? It’s not moving around either.
https://s8.postimg.org/fhg6zmo2d/2017-04-14_1605.png

For centering mobile logo, try this:

@media (max-width: 768px) {
    .mobile-header-navigation .mobile-header-logo {
        text-align: center;
    }
}

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

[Leo]

I see what you are saying about the logo.

Go to Customizer > Layout > Header and set both Header Width and Inner Header Width to Contained.

Then set Left Header Padding to 0.

Let me know if this is what you wanted.

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

[Sebastián]

Centering the mobile logo didn’t work. I don’t know why.

About the other problem im not sure if it worked (because like i said in my computer looks fine). But i will keep you posted regarding this.

[Tom]

Centering the logo only won’t really work because of the menu toggle.

However, you could center both:

#mobile-header .inside-navigation > * {
    display: inline-block;
    float: none;
}

#mobile-header {
    text-align: center;
}

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

[Sebastián]

After trying a few things here and there I made it work I guess.

This is a screenshot from the main page taken from the computer: http://i.imgur.com/oFaYUcB.png
This is a screenshot of the main page taken from my mobile: http://i.imgur.com/c6PIOKF.png
This is a screenshot of the blog page taken from my mobile: http://i.imgur.com/rwkYVYO.png

So It seems that in my mobile my front page logo is not centered. But i guess that if its good in the customize preview then its good for every other mobile right?

Now the “new” problem is the spacing between the logo and the menu button and the spacing between the menu button and the body. I want to reduce the gap.

Thank you so much for your help, I will recommend this theme to everybody because of the work and effort you guys put in the support area.

[Leo]

Can you try clearing W3 Total Cache? I don’t see the code being added currently.

Spacing between the logo and menu toggle:

.menu-toggle {
    line-height: 30px;
}

For spacing between menu toggle and content, you could try Customizer > Layout > Container > Mobile Content Padding > Top

Let me know.

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

[Tom]

Weird, it seems your blog is using the mobile header, while your home page isn’t. What setting do you have set in the Customizer?

This will help reduce some of that vertical space as well:

[class*=nav-float-] .site-header .inside-header>.site-logo {
    margin-bottom: 0;
}

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

[Author]

Posts