Blog Post Not Responsive: Cutting Off Side of Page
By Gilan Gork on Tuesday, 11 October 2016
Posted in General Issues
Likes 0
Views 279
Votes 0
Hi there,

I've just noticed that my blog posts are not completely responsive when viewing on mobile (tested on my iPhone 6 using Safari). The right hand side it cutting out.

I sent out a big mailer today for a new blo post so hoping we can resolve this issue as soon as possible as many of my readers use mobile.

For example, see this post from today: https://www.gilangork.com/blog/entry/influence-mastery/success-self-persuasion-the-graffiti-principle

I am using the latest version of EasyBlog.

I can't seem to find what is causing this issue.

Thanks in advance for your assistance.

Gilan
Helo Gilan,

Can you try adding the block of css codes below? That should do the trick.

[gist type="php"]
div#fd.eb.w320 .eb-entry-nav > div > a {
padding: 20px 0 20px 20px;
}
[/gist]
Mark
·
Wednesday, 12 October 2016 02:01
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

Thanks for your prompt reply.

Your CSS code worked for the one blog post (the one I linked to in my original support ticket), however it does not seem to have solved the issue for any of my other blog posts. All other posts still have the original issue.

Warm regards,

Gilan
Gilan Gork
·
Wednesday, 12 October 2016 02:47
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Gilan,

Could you please provide me with one of the other page that has this issue?
Mark
·
Wednesday, 12 October 2016 02:49
·
0 Likes
·
0 Votes
·
0 Comments
·
Every other blog post, except the one above.

Go to https://www.gilangork.com/blog and then click on any of the blog posts, except the very top (latest) one, which is the one that your CSS code just fixed.

If you're looking for a direct link to one that is still showing the same issue then here you go:
https://www.gilangork.com/blog/entry/influence-mastery/success-self-persuasion-waterfall-thinking
Gilan Gork
·
Wednesday, 12 October 2016 02:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Gilan,

Can you insert css codes below into your templates stylesheet?
[gist type="php"]
div#fd.eb.w320 .eb-entry-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
div#fd.eb.w320 .eb-entry-nav > div {
width: 100%;
}
div#fd.eb.w320 .eb-entry-nav > div > a {
white-space: unset;
}
div#fd.eb.w320 .eb-entry-nav-prev + .eb-entry-nav-next {
border-top: 1px solid #ddd;
border-left: 0;
}
[/gist]
Chang
·
Wednesday, 12 October 2016 12:05
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Chang,

Thanks for your help. Your code does seem to solve the issue on all blog posts!

Many thanks to both you and Mark for assistance.

Gilan
Gilan Gork
·
Wednesday, 12 October 2016 13:03
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

You are most welcome. Glad to hear that your issue has been resolved now.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.
Abdul Warith Norudin
·
Wednesday, 12 October 2016 13:10
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post