Page shift in mobile design

I've tried this several times from scratch, and no luck on variation from the issue. When creating a mobile (phone) design, I come across an issue after adding a menu (I've been trying dynamic menus) to the master. In Design it looks/functions great, but when I get to preview it shifts the entire page over. Suggestions?

This is caused by having items outside the width of the page. Unlock everything and make all layers visible then use select all to look for items off the right of the page or master page.
Phone and Tablet browsers zoom out to show all the content. If there's content outside the width of the page, they'll zoom out farther than you want.

Similar Messages

Some pages shift to the left on iOS mobile platform

This persistent problem is driving me nuts. Some pages of my mobile sites shift to the left. All of the pages are similarly sized: 420 w x 570 h.As recommended in another thread, I inserted <meta name = "viewport" content = "width = XXX" initial-scale = 1.0> in the metadata to no avail. An example can be found here: http://rockandvine.businesscatalyst.com/index.html.

Hi,
It seems there are navigation arrows placed to the far right (beyond page) on the pages/master in the Phone layout.
Please check: https://grabb.worldsecuresystems.com/2013-09-20_0115.png
Removing these should alight the pages correctly.
Hope that helps.
Cheers,
Vikas

How would I create a mobile blog layout, by combining Business Catalyst's Modules and Adobe Muse's mobile design function?

The title says it all. I absolutely love Adobe Muse's ability to design mobile and tablet layouts and have grown very fond of the workflow between Business Catalyst and Adobe Muse. The only issue I have found is the ability to incorporate the blog module to a mobile design or tablet design. I understand that Business Catalyst has you insert a tag code to create a page template for the blog to sit in but is there any way to have a mobile and tablet layout for the same blog? I would love if visitors reading my blog from their phone, didn't have to switch from a phone layout to a desktop layout just to read the blog. Once they read/ switch the blog, they can no longer navigate back to the mobile website version because of the page template I have assigned to the blog. All in all, I just want the ability to have the blog fit all mobile, tablet, and desktop versions. Any ideas?

Hey Brad,
That answer really helped and I am making progress! Now for some reason when I pull up the blog on my mobile, it says 'Error: Some files are missing or can not be loaded. Please clear cache and reload the page.' Any ideas why this might be happening? I haven't used the {system_visitorDeviceClass} that you mentioned.
Maybe the method I used to create mobile layouts was wrong but what I did was create mobile and tablet layouts with the {tag_pagecontent} on each. Once published, I copied the html code for the phone template (as it did not automatically recognize the mobile and tablet page template were part of the same desktop layout) and pasted it to my template I had already assigned as a default. I then did the same for my tablet layout. What am I missing here : /
Thank you for all the help so far! I am making progress!

Page shift due to vertical scroll bar issue

I'm working through a vertical scroll bar issue in my design, using a ProjectSeven CSS page template. When testing the site in my browsers (FF/Safari/IE/Opera), and IF the scroll bar is not present, the entire page shifts to the left (the width of the scroll bar) when I click a link in the left column of my design. The page does not shift when the vertical scroll bar is present. Support at P7 suggested the following fix:
html, body {
height: 100.1%;
margin: 0 0 1px;
I've tried placing this markup in about ten different places but can't seem to find the right location in the code. Is it possible for someone in the forum to take a look at my page source and show me where/how to locate this fix?
See my test site at:
http://www.murcal.com/test_curvi_2.html
Thanks . . . .

PZ,
I'd like to place the fix where you've suggested, but that's the whole issue.
I simply don't know where my CSS ends (duh). Is it possible that you show me exactly where?
Hopefully this is the right section of my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PVII Curvitude</title>
<link href="p7curvitude/p7CRVboxes982_2col.css" rel="stylesheet" type="text/css" />
<link href="p7curvitude/p7CRV08.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="p7pmm/p7PMMscripts.js"></script>
<link href="p7apm/p7APM10.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7apm/p7APMscripts.js"></script>
<link href="p7pmm/p7PMMh04.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7pmm/p7PMMh07.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
I've tried placing it in about ten different places, but I'm wrong everytime.
Obviously, I'm a beginner trying to learn. I just can't seem to place it correctly.

Entire Page Shift left-right

A page on a website I designed shifts by about ten pixels to the left. I have several master pages with essentially the same background. The elements on the master page are not locked. Should they be? How can I see where the error is if I cannot see the HTML data? Does anyone have any idea what prompts that kind of a shift? Is it a bug? This was not happening before version beta 7.
The url is
http://www.primary-team.com/news.html
I appreciate any suggestions. Thanks,
Rich

REVISED: Since there have been no suggestions I will add this. I tried creating a new test site with the same art for background and it seemed that as long as no new pages are added to the site (menu) once much work has been complete it was stable. After adding more text to the site I'm getting the same problem again. A page shift once you click from page to page using the menu. It seems like a definite bug in Muse.
Any help?

What is the correct Page Width for Mobile Device???

Hi All
Just have a question that "What is the correct Page Width for Mobile Device???"
Is the Default 380px width is right? or 320px?
Because the average smartphone is having resolution is 320X480 pixels...
also in this video http://tv.adobe.com/watch/muse-feature-tour/adobe-muse-designing-for-mobile-devices/ Dani Beaumont created the Mobile version website in 320px width (If you watch the video carefully you can notice the page width is 320px)
And if the default page width 380px taken, will it be displayed correctly on every smart phone (average & high end)?
please reply if you have any suggestions

HI. I have designed a mobile web site that is currently 450pixels wide. This is the first one I have done. When it displays on some mobile phones, the width of the entire page is scaled down and it only fills about 1/2 of the width of the mobile phone with a whole pile of mrgin to the right. Is this because I should have designed it to be 380 pixes wide or have I done something else wrong. The test site is at:
http://ancasterdental.com/muse/phone/index.html
Please help me if you can. Thank you.
john.

Page shifts on iPad

I'm creating a new desktop portfolio site. On a desktop monitor everything is fine, but on my iPad some pages shift to the left. Ive searched for spurious text boxes - there are none I could find. I've tried moving objects away from the right margin (by a pixel or two) but it doesn't help. I've even trialled one of the offending pages designed specifically for a tablet, but it still happens.
The pages in question are child pages in the 'Design' section.
Has anyone got a fix for my problem? I'm a html virgin.
I'm currently trialling my site on business catalyst under: elcricdercasv1.businesscatalyst.com

Hi Sanjit,
I thought no one cared! Yes, I resolved the problem - for what its worth it turned out to be one of the rectangles spanning the page in the headers. This moved up and out of view when the page was scrolled. I've pinned it in place and now the problem is resolved. A little bizarre really, as it only affected certain pages that used that particular master page.
Thank you for your response, so problem sorted
John

How can i make a soft return with pages shift enter does not work!

how can i make a soft return with pages shift plus enter does not work!!

On full keyboards with a numeric keypad, the key above the right shift is "return" & the one on the numeric section is "enter." On a Mac (or Apple IIgs ) they do have separate functions. On the "mini" keyboards, both names are on the same key, but "enter" is written in smaller letters. I'll have to check to see how that works on another Mac later today.

"Oslo.Master" set as the The default Master Page, but when record selected in "List View Web Part" page shifts to the right.

Hi All,
I have set "Oslo.Master" as the The default Master Page for the site. I have a page with a List View web part and an InfoPath Web Part connected. When the page loads is it displayed correctly. However, when a record
is selected and the infopath web part is updated, the content on the page shifts (indents) to the right.
Is there something I am missing? Does anyone know how to correct this?
Thanks in Advance!

Hi Dwayne,
I could reproduce this, as a workaround, we can use javascript code as below to hide the element in the following image.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#contentBox').prev().hide();
</script>
Thanks
Daniel Yang
TechNet Community Support

Can you help me with Page Layout and/or Design ideas for a software manual?

Greetings,
I am a new InDesign user, and am converting a software manual that I created in MS Word into InDesign. It will be converted to a pdf to view online. I have the basics (3 master pages, page numbers, running headers, 2column pages with text boxes on the left and screenshots on the right), but I want to make it look prettier. Could you please give me some ideas on page layout and/or design to make it look better or more creative?
A few things that I am considering: borders around screenshots, a watermark, a logo next to the page numbers, different size/type of fonts, etc.
I am open to any suggestions to make this look better. However, please understand that I am new to InDesign. With that being said, please tell me a few steps when you mention your tips. Thank you!

Take a look at a few websites on Cannons of Page Construction.
I think the best idea for you is to look at a few software manuals and take tips from how they accomplished the layouts.
I'm not saying to copy them - but rather see what works and doesn't work, what worked for them might not necessarily work for you - research some layouts.
Fonts/type/sizes etc. are pretty much ambigious without context - is this a software manual for kids (soft cuddly big fonts easy to read), technical (small, tight spacing etc), Adult friendly (smooth, crisp clear, well spaced), elderly (large elegant fonts).
It all really depends on your demographic audience.
Being new to InDesign I suggest you take up Sandy Cohens Quickstart Visual Guide.
I think you should look at Michael Murphys Book on Styles
And you should definitely get your printer (the guys bulk printing) the booklet for you on board from the start to work out optimal sizes to suit their printing presses and workflow etc. And to ensure that you are setup correctly in page sizes, margins, safe type areas, colour profiles and a few other things that your printers prepress can help you with.

My iPhone 5 is not catching up my website, although having a big screen... What does it need to get the pages in auto mobile queries converting?

my iPhone 5 is not catching up my website, although having a big screen... What does it need to get the pages in auto mobile queries converting?

You need to code your web site to recognize the mobile browser and send a page that's actually usable when it does.

HT1677 Where can you set default in Safari to view as web page instead of Mobile Version?

Where can you set the default setting in Safari to open page as web page instead of Mobile Version on iPad running iOS6.01?

And, to make it even more fun, sometimes a website changes how it deals with Safari Mobile. A website that treated it like a desktop browser suddenly starts treating it like a cell phone. Just to mess with you. Or push an app.
Best of luck.

How do i delete pages on firefox mobile?

I can delete pages on foxfire on my desktop but cant seem to do it on my mobile firefox. how do i delete pages on my mobile?

The All Pages tab lists history and bookmarks. To clear history, have you tried using Clear Private Data in Preferences?
On the start screen, there also are some history-related add-ons that might give you better control; I haven't tried any of them myself.

Why do the pages shift (DWCS4)?

I have set up a site in Dreamweaver and wonder why some of the pages shift slightly (and I don't like that) when you select them on the navigation bar and others do not? (When you click from Retailer to Developer, the page shifts; when you click from Developer to Research, it doesn't.)
Thanks for you help. Here's the link:
http://www.studiopgraphicdesign.com/sw/index.html

That's often just a matter of some longer pages have a scrollbar and others don't.
You can "force" a scrollbar on all pages with CSS.
There are pros & cons with various solutions
Here's one:
html{
overflow-y:scroll;

Not publishing entire site with all pages from site studio Designer

Hi,
I have created the site with one primary page & one secondary page in the site designer. I must admit that they don't have link to each other. When I publishing this site using Oracle Site studio publishing utility to a subscriber, it is publishing the primary page as index.htm in the destination. It is not pulling the secondary page. But i would like to get the entire site including the secondary page. What needs to be done to get the entire site. If you have any idea, please let me know.
Any help would be appreciated.
Regards & thanks,
Nirmala Vijaya Sekhar Varre

Hi
One way is setting a region in secondary as 'set replaceable' and geting ssURL from the code and link them in primary page.
Thanks
Srinath

Page shift in mobile design

Similar Messages

Maybe you are looking for