[Resolved] Spacings between Title / Content / Tags

[Jan Schmidt]

Hi Tom,

i’d like to reduce the spacings between the titles of the widges an the widged content.
Also the Spacings on between title of a article to the content and content to the tags under a aritcle.
I found no option to do this in the spacings add-on, i think this could be done with a custom css. I Already activatet “custom CSS” at the Jetpack Plugin – but at least i’m just a user, not a coder and i don’t know if the custom CSS from Jetpack could collide with the CSS in your theme.

Can you help me out?

site: http://www.deejay-basics.de

Best reguards from germany,
Jan

[Tom]

Hi Jan,

1. Widget titles:

.widget-title {
      margin-bottom: 30px;
}

2. Between title and content:

.page-content, .entry-content, .entry-summary {
      margin-top: 30px;
}

3. Between content and tags:

footer.entry-meta {
      margin-top: 20px;
}

Adjust the pixels as needed – you can definitely use the Jetpack CSS option.

Off to bed (12 AM here) – will check back in the morning 🙂

[Jan Schmidt]

solved 😉

Thanks alot, that worked fine!

[Evandro Arruda]

Hi Tom,

About this space, can I remove the space between title and featured image when using masonry?

Thanks

[Tom]

Something like this should work:

.post-image {
      margin-top: 0;
}

Let me know 🙂

[Evandro Arruda]

It worked perfectly!

Just to add some information, if you want to make a fine adjustment, use “px” after the value.

Thank you again Tom!

[Tom]

You’re welcome 🙂

[Vojtech Pasko]

Common problem guys…how can i set this parameter for smartphone web site?

if i try this

@media screen and (max-width: 768px) {
.widget-title {
margin-bottom: 0;
}

than it is not working…

is it possible that my phone have QUAD HD resolution what is 2560 x 1440 and so my phone does not match to this restriction. This could also fix other problem i have with social buttons. Lot of smartphones have better resolution than TV or Monitor so there have to be different way how to set params for smartphones…

thank you for help and sorry for my bad english

[Tom]

The resolution shouldn’t be the issue – the 768px refers to the width of the browser.

For example, if you resize your browser window to the width of your phone, then that styling should take effect.

Let me know 🙂

[Vojtech Pasko]

Ok, as i resized browser then i got mobil phone like view, did not know that so thank you

But problem is, that param for changing space at side bars works well at desktop, it also works at desktop if i change size and have phone like browser size, but it does not work at phone right.

You can see pictures. Its same page, same time, one is photo of my desktop screen and its fine, second is screencapture from my phone. Tried two browsers at phone so android browsers doing something different way.

Tried chrome at pc fine chrome at phone and problem

i mean that space at sidewidgets marked by red something i draw…

https://drive.google.com/file/d/0B0uEnbBu_U4JWGluWllZTUF1VUU/view?usp=sharing
https://drive.google.com/file/d/0B0uEnbBu_U4JTFVmRTBuMTBKc2M/view?usp=sharing

[Tom]

After inspecting your website, I’m not seeing that code added anywhere.

How are you adding that CSS?

Let me know 🙂

[Author]

Posts