Scribe isn't optimized for iPad and iPhone... It looks unprofessional. Pls help!

Hello heroes:

I notice that my site looks great on a desktop or large computer screen. I love it!

However, it does not load (or look) right on an iPad or even an mobile phone. The blocks are all messed up -- the title of the page isn't at the top, the far right block is loaded before the top left block..... And there's no page title. It is just a jumble. It looks unprofessional.

What can you do about it? I'm going to need to switch to a different system if I can't get it to look more professional on mobile devices. But I love the look of the site thru Scribe (and I've put a lot of work into it) so I hate to have to switch.

Please, can someone fix how the Scribe theme is formatted to fit on mobile devices??

Warmly,
Erika Marie

  • Adam Czajczyk

    Hello Erika Marie,

    I hope you're well today and thank you for your question!

    Upfront (and as a result all its starter themes such as Scribe) include "Responsive mode". This is a tool that lets you adjust the site to mobile/responsive views.

    Once you've got your site designed for desktop, please select "Responsive mode" button that's located in bottom-left corner of the screen (bottom-left part of Upfront panel) and Upfront editor will be switched to responsive mode.

    You'll notice three icons at the top of the screen: "Mobile", "Tablet", "Default". You can use them to switch through different modes (screen resolutions).

    The "Default" mode is essentially the same as regular Upfront editor. When you switch to "Tablet" and "Mobile" modes Upfront will re-arrange layout a bit automatically but you will also be able to make adjustments to the layout/design so it would look on mobile devices (e.g. iPhone, iPad) the way you like it to.

    Give it a try please and let me know in case you'd need any further assistance on this.

    Best regards,
    Adam

  • Erika

    Thank you Adam!

    I truly appreciate the quick responses of this support team. I'm having trouble loading Upfront right now (every so often it gets stuck "rendering" indefinitely.). But I will try that fix as soon as it comes online.

    Just to clarify: I'm not asking so as to be able to edit upfront on tablet (Although, I will do that now).

    I'm saying that viewers of my website (on their iPhones and tablets) do not see a professional-looking website on certain pages. The pages I'm specifically talking about are the ones built using the "About" template. If you go to my site with your iPhone you'll see what I mean. The blocks are loaded incorrectly: The page title is 1/3 down on the page, the right-column of information is loaded prior to my left-column of information (which doesn't flow as I'd like it to -- I set up my site to be read left-to-right, as we typically do.)

    Thank you for checking into it!

  • Sajid

    Hi Erika,
    Hope you are doing good today :slight_smile:

    Could you reproduce this issue by using our live Scribe theme demo ? I can't reproduce the issue on my own site neither on live demo.

    Regarding your website, on home page you have your image in Erika Fayina Marie section in the background. That is why there are issues on mobile and table because we dynamically can't control the positioning of background image on different resolutions. There are some predefined like, center, left or 50% etc that can be used for different resolutions but only when you know where and on what device exactly the issue is.

    So, in this scenario we need to optimize the layout of your website and will start from your homepage. Instead of using the image in the background with grey background. Please slice that image individually and add it in the layout using the image module/element. From background remove this whole image and use grey color instead.

    This way you can perfectly organize your content on different resolutions using our responsive mode tool as suggested by my colleague Adam Czajczyk above.

    Please make this change and let me know if you need help with it or post the link of other page with screenshot you are getting issue so I can suggest what you should do there.

    Look forward towards your response Erika :slight_smile:

    Best Regards,
    Sajid

  • Erika

    Thank you!

    I changed the background as you suggested and that did greatly help the main page. Thank you!

    ... BUT...

    The main problem is still unresolved. Which is that if you go to the "About" page (or any page built with that template) on an iPhone or iPad, the title (ie, "About") is loaded about 1/2 way down the page. The top left content block is loaded preferentially, before the header or sub-header. Its clearly a behind-the-scenes programming issue of which blocks get loaded first when its optimized for tablet or phone... please, can you help?

    Best,
    Erika

  • Predrag Dubajic

    Hi Erika,

    As Sajid mentioned above we're unable to replicate this issue on our installations and also on Demo it looks good as well, so it looks like something specific to your installation.

    Would you mind allowing support access so we can have a closer look at this?
    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Predrag

  • Nastia

    Hello Erika

    I hope you are doing well today!

    With Upfront, you can edit and modify your page for mobile devices.

    Once you in the Responsive mode, select a device from the top - tablet or mobile and move the elements to place it in the right order.

    For now I've changed the elements position on the About page for the tablet view. If you need to change them on other pages, please do the following:

    - Click on the Responsive Mode

    - Select a responsive device from the top bar and drag the elements up or down:

    Don't forget to save the changes :wink:

    I hope this helps!

    Cheers,
    Nastia

  • Erika

    Hi Nastia,

    I appreciate the help. I really do.

    But this is so frustrating and SUCH a poor use of my time.

    I have moved elements in Responsive Mode as you explained. But every time I adjust it for mobile (and save it) it screws it up for tablet. Then I fix it on tablet, save it, and I go back to mobile, and its all screwed up again.

    It is driving me insane, and its incredibly frustrating, and it is WASTING time I don't have to spare.

    Please help.

    Thank you!

  • Milan

    Hello Erika

    Sorry to hear about your that issue,

    But while loading your Upfront Editor I got this error in my browser console and because of this error, I was not able to load it fully and test it fully. :confused:

    So to take down that first, would you please conduct quick plugin conflict test by following instructions given in this flowchart ?
    https://premium.wpmudev.org/manuals/using-wpmu-dev/getting-support/

    If this does not solve your issue then, please clear your browse's caches and most importantly server caches.

    Looking forward to hearing back from you.
    Kind Regards,
    Milan

  • Milan

    Glad to know that your issue has been resolved Erika :slight_smile:

    And we are not unhappy because off frustrations. I can understand that. So all good now. :slight_smile:

    Now as this thread has reached to its conclusion, I am marking this one as resolved one and you do not need to reply me back here anymore. In case if this issue comes up again, please feel free to reopen this. For other issues/queries you can always open new thread.

    Thanks a lot for being with us Erica. :slight_smile:
    Cheers,
    Milan

  • Erika

    Hi Milan,

    I'm sorry, I was wrong. The issue is not resolved.

    Its not working. I keep trying to save the elements and they keep reverting. Here is how I want them to go on the About page for both Tablet and Phone:

    "Why do you believe in Integrative Medicine?"
    "Click to schedule" button
    "The Power and Potentiality..."
    Photo
    Media Bio
    Speaker Bio
    Professional Pedigree
    Veteran Info
    And then the email subscription etc.

    Thank you!
    Erika

  • Predrag Dubajic

    Hi Erika,

    I saw that you had snapshot on your site so I took a snapshot of your site and restored it on my local installation to make further tests and it looks like there's no plugin conflict in this case since even with all of them deactivated it doesn't work on my installation.

    However there are some issues with the contact form in bottom of the page as it's throwing some console errors.

    Can you tell me how was this added and if you were using some third party code for it?

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Erika,

    Thanks for the info, I did few more tests on my installation with the Mailchimp and the issue with UF editor loading is indeed caused by the embedded code and I have reported this issue to our developers.
    Current workaround would be to remove the form and get a new one from MC but don't include the JS files:

    As for the moving elements in responsive mode, the page is actually split with wrappers and you can't move elements from one wrapper to another in responsive mode, your wrappers would look like this:

    I would suggest grouping elements in each wrapper while in full editor mode and then switching to responsive mode where you can rearrange those groups/wrappers.

    Let us know how it goes.

    Best regards,
    Predrag

  • Erika

    Predrag,

    I kind of love you.

    Thank you! I cleared the MC JS and re-embedded the sign-up code and it should be working?

    Except its still kind of not.

    The homepage is an easier example because there are less elements out of order.

    What I'd like to see is the homepage pretty much laid out on iPhone exactly in the order it is on the screen (minus the Facebook Likes thing... that can go on the bottom because honestly... well, its nice but not that important.)

    Photo
    Name
    Description of Me
    "Read more" button
    "Are you ready" text block?"
    "Yes, Reserve...." button
    And then all the other beautiful jazz with icons and text describing clinic locations etc.
    Then the facebook thing
    Then all the rest.

    I can move all the elements into my desired positions while in Responsive mode, but they don't seem to *Stay* there. They revert. They do their own thing. If they were dogs, I'd send back them to remedial training.

    But they are elements -- and I have no idea how to make them stay.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.