How blogsite appears on mobile

  • Author
    Posts
  • #112863

    henrylflee
    Member
    Original poster

    There appears to be a problem with the way my blogsite is appearing on mobiles.

    * Dashboard -> Appearance -> Customize
    * At the bottom-left of the Customize menu are 3 icons indicating how my blogsite will appear on different devices: desktop, tablet, and mobile. I click on the icon for ‘mobile’.
    * When I access fotoeins.com/blog and I select one of the blog posts, the individual post appears “right justified”, where the mobile screen appears to be only viewing at the right one-third strip down the post; see screen-grab here.

    Interestingly, I don’t see this effect on AMP (re. Dashboard -> Appearance -> AMP); see another screen-grab here.

    A very interesting puzzle!

    The blog I need help with is: fotoeins.com

    #113049

    scottrrollo
    Theme Author

    Hey! How interesting, Henry!

    I’m not seeing the same thing. And I’m certainly not having any trouble viewing our demo site on my iPhone.

    Are you seeing the problem when you actually view your site on a mobile device? Or it it just the preview?

    Thanks!

    #113100

    henrylflee
    Member
    Original poster

    Hi, Scott.

    Thanks for your reply.

    I only edit and preview my WordPress blogsite on a Mac laptop. With iOS 10.3.2 on an iPodTouch, viewing posts on my blogsite with the mobile versions of Safari and Chrome shows the “interesting” effect about which I wrote above.

    It’s irritating, even though I would rather have people view my blogsite (especially any photos) on a much wider screen. Naturally, I don’t see this weird effect with desktop-versions of web browsers on my laptop.

    #113126

    scottrrollo
    Theme Author

    Aha! I can see it now, Henry.

    I can’t see in on my iPhone, but when I scale down the browser widow’s width, I can see it on my desktop.

    I have a hunch this is caused by some custom code, because it’s not showing on our demo.

    Would you mind temporarily removing any code changes you’ve made and see if that helps? At least then we know where to look — it’s just a matter of sorting our the customiztion.

    Let us know 😀

    #113157

    henrylflee
    Member
    Original poster

    Hi, Scott.

    First of all, happy 4th of July holiday to you and your colleagues.

    Second, based on your hunch, I’ve decided to temporarily remove all the “extra” CSS code I’ve added over the last couple of years. So now when I view the posts on my blogsite, the mobile versions of my posts and my blogsite appear to look okay, on both mobile browser versions of Safari and Chrome.

    What I’ll do next is slowly add back CSS code piece by piece, and see where things go awry.

    #113158

    scottrrollo
    Theme Author

    Thanks! Happy 4th of July to you too, Henry!

    Sounds like a perfect plan. Please let us know if you need any help along the way.

    #113176

    henrylflee
    Member
    Original poster

    Hi again, Scott.

    I might have keyed into an issue.

    In 2-column mode, the “Photography” theme has main content on the left and the sidebar on the right (“content-sidebar”). With this default, posts appear okay on desktop and on mobile.

    My personal preference is to have a “sidebar-content” appearance. But when I attempt to swap the columns by putting the sidebar on the left and main content on the right with something like this CSS code:

    /* margin: top right bottom left  */
    aside {
    	float: left;
    	width: 100%;
    	margin: 0 0 0 -30px;
    }
    #content {
    	float: right;
    	margin: 0 10px 0 0;
    }

    the posts look weird on mobile (appearance “pushed to the left”) while looking normal on desktop.

    #113178

    scottrrollo
    Theme Author

    Hey! Nice work narrowing this down, Henry.

    You’re absolutely right that the switch in position of your sidebar and content is causing this problem. Thankfully it’s an easy fix. Give this snippet of code a try:

    /* switch sidebar and content position  */
    aside {
    	float: left;
    	width: 100%;
    	margin: 0 0 0 -30px;
    }
    #content {
    	margin: 0 10px 0 0;
    }
    
    @media (min-width: 900px) {
    	#content {
    		float: right;
    	}
    }

    Let us know how it goes 😀

    #113180

    henrylflee
    Member
    Original poster

    Thank you, Scott; I’ll check out the code snippet in the next couple of days.

    #113181

    scottrrollo
    Theme Author

    Sounds good, Henry! Let us know if that code does the trick 😀

    #113183

    henrylflee
    Member
    Original poster

    Hi again, Scott.

    The code which you kindly provided seems to work: so far so good. Thanks again!

    I may have found another problem. I don’t think this new issue is related to the odd appearance I mentioned at the very beginning of this thread. If I continue seeing this new issue, I’ll start another thread.

    #113184

    scottrrollo
    Theme Author

    So glad to help, Henry!

    Let us know if that second issue pops up again — happy to help get that sorted out for you.

    Have a great weekend 😀

The topic ‘How blogsite appears on mobile’ is closed to new replies.