Responsiveness on iPhone
By Mike Bires on Tuesday, 13 October 2015
Posted in General Issues
Likes 0
Views 865
Votes 0
Hello - When visiting our website, http://lawenforcement.social on an iPhone 6+ using the Safari browser, we find that EasyBlog is not responsive when viewing a blog post. Attached is a picture taken from the phone. You will see the article is small and shoved over to the left.

The article should fill the whole screen, without having to do any manipulation of the browser (like zooming). We've checked your site and other sites using this mobile version of Safari, and have found them to be working properly. It is only our website which appears to be having the problem.

Please help in fixing.
Hi Michael,

I already inspected this blog post (http://lawenforcement.social/episode-20-we-take-the-show-to-blab) to replicate your issue.

From my inspection, I figured out that audio and video element styling is not responsive and this two elements pushing your layout display in mobile browser so that it will appear fit on your screen.

I already updated your blog HTML content to improve the display, please advice.

Thank you
Ikram Hakimi
·
Tuesday, 13 October 2015 11:11
·
0 Likes
·
0 Votes
·
0 Comments
·
Ikram,

There still seems to be a problem with the article not centered and filling up the screen. The home page and other pages, like the resource page, are all centered and enlarged. However, when clicking on a blog article, even one without the audio and video, it still is moving it over to the left.

Please fix if possible. Thank you!
Mike Bires
·
Tuesday, 13 October 2015 12:50
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Michael,

Can you try adding the block of css codes into your template's css file?



div.eb-share {

max-width: 100%;

overflow: hidden;

}
Mark
·
Wednesday, 14 October 2015 15:24
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Michael,

Please add try this CSS hack to:
@media (max-width: 979px) {

    body {

        overflow-x: hidden;

    }

}
Please advice, thank you.
Ikram Hakimi
·
Thursday, 15 October 2015 10:43
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you gentlemen! That worked!
Mike Bires
·
Saturday, 17 October 2015 05:08
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for updating Michael, glad that your issues are resolved now
Mark
·
Saturday, 17 October 2015 12:59
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi - Just found out a problem related to this change. Now when I visit my website from an iPhone, the menu is whited out whenever I navigate to a different page. Please advise.

Thanks
Mike Bires
·
Sunday, 01 November 2015 07:59
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Michael,

I am really sorry for the delay of this reply as it is a weekend for us here. The changes that Ikram provided shouldn't affect the menu. I have also tested this with my mobile device and it works fine.
Mark
·
Sunday, 01 November 2015 15:06
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

The change is affecting the menu. If you are on the home page, and click on the menu, it appears normal. If you navigate to another page, THEN click on the menu, you will see a white screen appears and the words are illegible. See the attached screen shot.
Mike Bires
·
Monday, 02 November 2015 08:33
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Michael,

Sorry for this delayed response.

Can you try replace this code to my previous solution given before?
@media (max-width: 979px) {

    html {

        overflow-x: hidden;

    }



    body {

        overflow-x: hidden;

        margin: 0 !important;

        width: 100%;

        padding-left: 0;

    }



    body.uk-offcanvas-page {

        padding-left: 270px;

    }

}
Hope this would help.
Ikram Hakimi
·
Monday, 02 November 2015 12:51
·
0 Likes
·
0 Votes
·
0 Comments
·
That worked! Thanks again, sir!
Mike Bires
·
Monday, 02 November 2015 14:24
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Michael,

Glad that your issue is resolved now.

Please let us know if you need further assistance. Cheers!
Ikram Hakimi
·
Monday, 02 November 2015 15:26
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post