My website is shown left aligned on mobile, but centered on desktop.

The site I'm building is showing up on the mobile left aligned. I want it centered like it shows on the desktop. I'm also running into a problem when in the mobile view, the background does not extend to the end of the page and shows a white bar. I believe it has something to do with the viewport, but how can I fix it.
Here is my site http://ideateink.com/empire/_test/argyless/index.html
I even made a container that holds all the content...
.container {width:1000px; margin:0 auto;}
Can anyone find whats wrong and help me?
Evan

Since most mobile devices are not 1000px wide, it's physically impossible to center your fixed-width layout on a smaller devices. There isn't enough available real estate to do it.
If you want a site that performs well in all device widths (aka Responsive), consider re-building your site layout with CSS media queries. See links below.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Nancy O.

Similar Messages

Desktop version is left aligned on mobile devices

My desktop version of my website is left aligned on mobile devices.
I checked if there were items in the grey area but i can't find anything.
Is it possible to share my muse file with someone who can help me out here? (41mb)
Thanks,
www.podiumscool.nl

I would check this out.... looks like a text indicator...

YouTube Video Issue - when I fill the wrapper it left aligns on mobile & tablets

Example: http://www.hollywoodunderground.com
When I set the width of the video to 1000px, it looks fine in browsers, but when you look at it on a mobile device it left aligns the whole page. My only fix so far has been to change it to 990px but obviously that doesn't look quite as good. I have the iframe inside a video DIV with the dimensions set in HTML, would CSS dimensions be better or is this something with YouTube?

In the following example, I have embedded a YT video inside a FluidGrid Layout (% width). The video and layout respond to device width.
http://alt-web.com/FluidGrid/Fluid.html
The relevant CSS code for video-container is this:
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
The HTML:
<div class="video-container">

<iframe width="560" height="315" src="http://www.youtube.com/embed/your-code-here" frameborder="0" allowfullscreen></iframe>
</div>
Nancy O.

Page shrinks and left aligns on mobile devices

I built a one page parallax scrolling site in muse, http://www.aviditycreative.com. The desktop version works perfectly, but when I preview and view the site on a mobile device it shrinks the entire page and pushes it to the left. There are scrolling effects but I notice the issue with and without scrolling effects, I think.
Please help!

I found the problem. The trick is to open the page plan that has the problem. Look for the properties type box that normally floats around next to Muse.
It has sections labeled: Swatches, Fill, Text, Scroll, etc. Click on layers. Expand the triangle to expose the component pieces if the page (text boxes, photos, etc.). There is an eye shaped icon next to each page component. Notice that if you click on the eye, parts of the web page will become invisible or hidden (if they are critical and have a photo or text in them). Click again and the text or image will return.
I found two empty text boxes that served no purpose. When I clicked on the eye shaped icon, nothing disappeared. I dragged them to the trash can at the bottom and re-published the page. Suddenly, the web page on mobile devices (like iPads and Android phones) was fixed and looked really good again.
In Summary:
Expand layers and make sure every box has a purpose. If it's empty and hanging around, it will likely shrink the view of the page on mobile devices. If you don't know this, it will be hard to understand why the page is so tiny on an iPad. Empty boxes break the mobile device view.

Desperate for help - Muse website not sitting central on iPad/Android, but fine on desktop Mac and Windows 8

Hello,
Hoping someone can help, tearing my hair out a little here as there is no logic to this and I'm thinking it's more a bug since the latest update..
The site when viewed on my mac looks perfectly central, but on my iPad only the 'pinned' header is central on the page with the rest of the content pushed to the left - and the footer doesn't expand to the right as it should and nor does that brown bar behind the slider.
Can be viewed here http://czav.co.uk/BritishTapas/MuseExport/
Please Muse Guru's if you can help that would be amazing.. This is for a client and I'm feeling very let down by the software at the moment..
There are definitely no hidden boxes anywhere off screen, and besides this doesn't answer why it's different on the iPad..

The published version of your Home page has a white rectangle just above the footer that's probably intended to be set to be 100% width, but isn't.

Mobile,Page layout,Left aligned

I have created a website using Adobe Muse and have uploaded the site to the ftp server . The website is live and is as designed when looked via a desktop. But when the same site is being viewed from a mobile, the entire page is getting left aligned and there is a gap to the right side. I even made a phone layout and uploaded the same to the ftp server and the problem still persists. Ive googled a lot and inserted html code into the metadata to make the site centered but in vain. Nothing works . I have a tight deadline and would really be grateful for any quick help.

Hello,
If the phone layout is showing up in phone and still its left aligned and then go to design view of the phone layout page and make sure there is no object is placed outside the browser area.(you can do select All to check this. ctrl+a or command+A)
If this is not the case then Please share the site URL or .muse file with us to take look at it.
Regards
Vivek

Graph legend width change - Left aligned or right aligned

Hello all,
when I place an XY-Graph with Plot-Legend shown in LV2012, the text of the plot name is left aligned, wich is, what I want. With this behaviour the little pictures, representing the plot attributes, are fixed. After migrating to LV2014 I realized, that the text is now right aligned, which means, that the little pictures are moving to left & right, depending on the plot name length.
I found no property controlling this behaviour.
As a workaround I could set the plot legend position depending on its width, when the plot name is changed, but there is no event, firing when the plot name is changed by the user. So I would have to poll the plot names in the timeout case of my event structure. Btw. I have to show six XY- graphs on my FP, so polling can cause a remarkable CPU load (when I do it 1000 times / s ).
Any suggestions?
Greets, Dave

Hello Dominik,
thank you for your reply.
I'd like to show you the problem with some pictures:
The left picture shows the original situation, the right picture demonstrates the behaviour with LV2012, the legend is right aligned.
The same situation in LV2014, the legend is right aligned.
Greets, Dave

How do I fix alignment on mobile device?

Website is aligned perfectly on a laptop or desktop computer but on any mobile device the entire website is off center. Also plugging in hyperlinks is not working. Any help would be appreciated! Thanks!

The most common reason is an empty box or text box on the page. In your mobile master pages and pages that are effected, do a select all and you will probably see an empty page element that is forcing your layout to shift.

How to make numbers in message text input fields left aligned?

Hi Friends
I have completed one of my task .but getting result right side of the field.
how to make numbers in message text input fields left aligned?
Thanks
Aravinda

Hi ,
Sorry for late replay i am trying this alos not set that page....
pageContext.forwardImmediatelyToCurrentPage(null, true, null);
and one more that kff field working is fine for ex display any text pled displayed properly and only problem is not set the value and HrSitKeyFlex6 and HrSitKeyFlex7 fields are perfectly get the values but not pront HrSitKeyFlex8 that only my issue....
Regards,
Srini

How to change the default left alignment setting in Word 2010 professional (personal use)

Hi, I use Word 2010 Professional for my personal use at home, and somehow the default setting for the left alignment in a new Word document has been changed to a hanging indent at .25. So every time I open a new Word document, the left margin
has an indent setting. I have to change it to 0.0 every time, which is annoying.
I've tried to go into the "Options" section, under "Custom Settings" to de-select an auto left margin indentation, but I can't seem to find an option to do that. Can anyone please tell me how to change this setting in the master Word 2010 template,
so that every time I open a new doc, the left side is aligned at the 1" margin with no hanging indent?
Thank you.

Page Layout-Page Setup-Margins-Custom Margins...-change your setting-Set As DefaultStay Hungry, Stay Foolish

Equal Space between Menu Items and Drop Down Menü left aligned not possible?

It seems like I can either have equal spacing between the horizontal menu items and the drop down menu will show up centered , or I say the menu items should be of equal size, and then drop down will be left aligned. Is there any way of having equal space AND left aligned drop down???? Thanks in advance!

Hello Anjum,
Thank you for reporting the issue. It seems to be a Bug and we have logged the same. Hopefully it will get fixed in coming releases.
As of now we do not have any workaround for same. However once we have some workaround, we will definitely share it with you.
Regards,
Sachin

XML Report Excel Output Numeric & Character value left aligned

Hi,
I want the XML Report Excel ouput both numberic and character values to be left aligned in the report ouput. Currently my report excel ouput prints the number value right aligned and character value left aligned.
I have tried to concat a space to the value to make that as a character value, but this gives a extra space in the report output, which shld not happen..
Please could anyone help me with a solution.
Thanks

Hi Uday,
You are making number as a string, by adding a character :) , so it will be displayed as string with space and not as number.

How can I Left Align text in the Marker Arrangement tabs?

It would make it easier to read the heading text of the Arrangement Marker tabs if they were Left Aligned when the project is minimised.
Is there any way of setting this up or is it a default?

I'm not aware of a way to make Firefox hide the first tab instead of the last tab; maybe there is an add-on with that feature.
There is a hidden setting to open the new tab at the end of the bar instead of next to the page you're reading. Then, of course, you won't have this problem. Instead, you'll have the problem that it's hard to figure out which tab had that link in it. In case you want to try it out, here's how.
(1) In a new tab, type or paste '''about:config''' in the address bar and press Enter. Click the button promising to be careful.
(2) In the search box above the list, type or paste '''tabs''' and pause while the list is filtered
(3) Double-click the '''browser.tabs.insertRelatedAfterCurrent''' preference to switch it from true to false (it should turn bold)
You're done here. You can keep it open in case you hate the change and watch to switch it right back. In that case, double-click again to switch it back to true.

How to Center Text in Menu and Left Align in Sub Menu

Hi - I'm looking to Center the text in the main menu of a Spry Menu in DW CS 5.5 but left align the sub menu's.
If someone could point me in the right direction it would be much appreciated.
Thanks
J

See here http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
Gramps

Having trouble with left align in all versions of internet explorer

I created my pages in Dreamweaver and uploaded them to my university's server. Because we have a content management system and my boss didn't like the layout that we are able to use, I had to create separate html pages and place them into the CMS using iframes. Each individual page has a banner on the top, and underneath that, a menu on the left side and the main body text on the right. In Chrome, Safari, and Firefox, the menu takes up the appropriate amount of space (about 250 px) and then the body text is left aligned about 10 px to the right of the menu. However, when I open the same page internet explorer, there is a large gap between the menu and the text. I have tried it within the iframes and without and both have this problem. The URL is: http://chicago.medicine.uic.edu/UserFiles/Servers/Server_442934/File/Hematology/welcome.ht m. Any suggestions?
Thanks!

I don't use tables for layouts. You have more control with CSS.
Copy & paste this into a new HTML page and play with it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/* Layout */
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
background: #edeadb;
#wrapper {
width: 925px;
margin:0 auto; /**centered on screen**/
overflow:hidden; /**to contain floats**/
#header { }
#leftSidebar {
width: 225px;
float:left;
border-right: 1px double navy;
font-size:12px;
#mainContent {
margin-left: 255px;
/**left side menu**/
#leftSidebar ul li a, .menu ul li a:visited {display:block !important; text-decoration:none; color:#000; width:220px !important; height:30px; text-align:left; text-indent: 10px; border:1px solid #fff; border-width:1px 1px 0 0; background:#070738 !important; color:#FFFFFF !important;
line-height:30px; font-size:11px;}
#leftSidebar ul {padding:0 !important; margin:0 !important; list-style-type: none !important; }
#leftSidebar ul li {float:left; margin-right:1px !important; position:relative !important;}
#leftSidebar ul li ul {display:none !important}
li.leaf, li.collapsed, li.expanded {
list-style-image: none;
list-style: none;
list-style-type: none;
#leftSidebar ul {
list-style-image: none;
list-style: none;
list-style-type: none;
/* specific to non IE browsers */
#leftSidebar ul li:hover a {color:#fff !important; background:#3b3b5c !important;}
#leftSidebar ul li:hover ul {display:block !important; position:absolute !important; top:0; left:220px; width:105px;}
#leftSidebar ul li:hover ul li a.hide {background:#070738; color:#FFFFFF;}
#leftSidebar ul li:hover ul li:hover a.hide {width:150px;}
#leftSidebar ul li:hover ul li ul {display: none !important;}
#leftSidebar ul li:hover ul li a {display:block !important; background:#070738 !important; color:#FFFFFF !important; width:150px;}
#leftSidebar ul li:hover ul li a:hover {background:#3b3b5c !important; color:#FFFFFF !important; list-style-type: none !important;}
#leftSidebar ul li:hover ul li:hover ul {display:block !important; position:absolute !important; left:151px; top:0; color:#FFFFFF;}
#leftSidebar ul li:hover ul li:hover ul li a {display:block; width:200px; background:#070738 !important; color:#FFFFFF;}
#leftSidebar ul li:hover ul li:hover ul li a:hover {background:#3b3b5c !important; color:#fff;}
/**end menu**/
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="http://chicago.medicine.uic.edu/UserFiles/Servers/Server_442934/Image/Hematology/mainbannerredstripe.jpg" alt="UIC Hemaotology/Oncology" />
</div>
<div id="leftSidebar">
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/">Welcome</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/medicine/hemonc/hemonc_calendar/" target="new">Section Calendar</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/faculty/">Faculty</a></li>
<li><a href="ttp://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/">Fellowship</a>
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/about/">About the Program</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/curriculum/">Curriculum</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/mph/">Additional UIC Programs for Fellows</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/physicianscientist/">Clinical Investigator Pathway</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/apply/">How to Apply</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/contact/">Contact Us</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/currentfellows/">Current Fellows</a></li>
</ul>
</li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/research/">Research</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/studentrotations/">Medical Student Rotations</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/dom_sicklecell">UIC Sickle Cell Center</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/">UIC Blood & Marrow Transplant Program</a>
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/about/">About Us</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/research/">Stem Cell Research</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/contact">Contact Us</a></li>
</ul>
</li>
<li><a href="http://www.chicago.medicine.uic.edu/cancercenter/clinical_trials/">Cancer Clinical Trials</a></li>
<li><a href="http://www.chicago.medicine.uic.edu/cancercenter">UIC Cancer Center</a></li>
<li><a href="http://uillinoismedcenter.org/">UIC Medical Center</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/">UIC Cancer Center at MacNeal</a>
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/about/">About Us</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/faculty/">Faculty</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/contact/">Contact Us</a></li>
</ul>
</li>
</ul>
<img src="http://chicago.medicine.uic.edu/UserFiles/Servers/Server_442934/Image/Hematology/line.jpg" alt="" /> <br /><br />University of Illinois at Chicago <br />
Section of Hematology/Oncology <br />
840 South Wood Street <br />
Suite 820-E CSB, MC 713 <br />
Chicago, IL 60612 <br />
Phone: (312) 996-9424 <br />
Fax: (312) 413-4131
</div>
<div id="mainContent">
<h1>Welcome!</h1>
<p>Welcome to the Section of Hematology/Oncology at the University of Illinois at Chicago. There are over twenty-five faculty members that are committed to providing the highest quality of patient care. The section houses a variety of outstanding programs including an exceptional stem cell transplant program, a nationally recognized sickle cell program, and a strong neuro-oncology program. We are one of the few universities that participate in the Minority-Based Community Clinical Oncology Program and are also a member of the Myeloproliferative Disease Program, both being NCI-funded programs.</p>
<p>The program continues to be a leader in expanding the possibilities of cancer research. Patients are given the opportunity to participate in a variety of pivotal clinical trials in thirteen different disease-type areas. Our research teams work to ensure that tomorrow's science is practiced as today’s medicine.</p>
<p>Our three-year ACGME Accredited fellowship program offers fellows the opportunity to work with a range of hematologic and oncologic disorders in a variety of settings in the Chicagoland area. Fellows rotate at the Jesse Brown VA Medical Center, Mount Sinai Hospital, Mercy Hospital and now with MacNeal Hospital in Chicago’s west suburb of Berwyn. Fellows are given the opportunity to focus on both clinical and bench research projects under the mentorship of our faculty members.</p>
<p>We welcome you to take a look at what our section has to offer.</p>
</div>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

My website is shown left aligned on mobile, but centered on desktop.

Similar Messages

Maybe you are looking for