Weird spacing issue from blog list to single post view

Posted in : TheBlogger
nerwin
Participant
23 March 2017 at 15:43
#47949

I apologize for being such a pest as of late.

But I notice there is a weird spacing issue when I go from the very first post on the blog list homepage to the single post view.

It seems when I go to the single post, the entry header has a weird spacing that looks like it just moves the entry title and featured image but not the actual body text.

I really don’t know how to explain it so I made a video haha.https://youtu.be/n8aLhSiW3Bs

But if you go to my website (http://nickerwin.com) and click on the first post you’ll see how there is a spacing difference between the blog list homepage and the single post view.

I know it’s a minor thing, but as someone who has OCD, it’s really irritating haha.

I’ve looked through the code using inspector tool in Chrome but I can’t pinpoint whats causing this spacing thing. It also occurs on mobile view as well.

Thanks in advance!
serkan
Moderator
23 March 2017 at 16:07
#47950
Hi,
I would recommend you to update your custom css code like this;
```
@media screen and (min-width: 992px) {
.blog-regular .entry-title { font-size: 50px; line-height: 1.2; } }
```
nerwin
Participant
23 March 2017 at 16:16
#47951
Dude, you are amazing.

I added this which brought up the featured image/video which made it perfect.
```
@media screen and (min-width: 768px) 
{
.entry-header { margin-bottom: 0em;}
}
```
Thanks again, I really appreciate it.
serkan
Moderator
23 March 2017 at 16:18
#47952

You are welcome.

nerwin
Participant
23 March 2017 at 16:20
#47953

Haha….ugh.

So I just checked on mobile view and it didn’t fix it there.

On desktop view, its perfect.

But on mobile the same issue is occurring.

Is it just the matter of changing the media queries a bit?
serkan
Moderator
23 March 2017 at 16:37
#47954
Hi, If you add this custom css code without media quary it should work out.
```
.blog-regular .entry-title { line-height: 1.2; }
```
nerwin
Participant
23 March 2017 at 16:41
#47955

That didn’t work unfortunately.

serkan
Moderator
23 March 2017 at 16:45
#47956

Haha, I can not see you adding the code I gave you. Because I will observe that when I add and test this code in your website, the problem is resolved. If the problem appears, you may have made a cache. I advise you to clean the browser and check it again.

nerwin
Participant
23 March 2017 at 16:49
#47957

Odd.

It’s in there and I’ve cleared my cache several times both on desktop and mobile.

I removed that line from the media query version you gave me earlier. Should I have no done that?
serkan
Moderator
23 March 2017 at 17:36
#47958
Hi,
```
@media screen and (min-width: 768px) {
.entry-header { margin-bottom: 0em;}
```
You added the code here and you need to close it with two fancy parentheses because it is code related to this media. The code that follows this code does not work because you close it with single parentheses.
It should be like this ;D
```
@media screen and (min-width: 768px) {
.entry-header { margin-bottom: 0em;} }
```
nerwin
Participant
23 March 2017 at 17:40
#47959

AH! My mistake. I did not see that.

I have lots of custom code in there.

Thank you haha.

serkan
Moderator
25 March 2017 at 12:33
#47983

You are welcome.