Adobe Muse,Mobile,Page layout,Left aligned,Right side gap, - mobile-website

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.

maybe your images are placed in pixels... If I am right
try using a rectangular tool... fill it with image then make the width 100%
to view the sample image click here
The size of mobile layout in muse is fix... I think the mobile you are using have different size... so just start using % on placing the images like the background etc.

There's a setting that was causing my content to be left-aligned in the phone layout.
Click Page > Page Properties
There's an un-marked button to the far right of Padding - click this and set it to centered. By default it is left-aligned.

Related

Pikachoose thumbnail carousel not working

I am using the Pikachoose plugin for the image galleries on my website (http://www.clare-eileen-callahan.com/inthehangar/). Everything seems to be working except for the thumbnail carousel. They just pile up on the bottom of the page, where I want the carousel to be horizontally scrollable, so that only x amount of thumbnails are visible. I can't figure out what is going on with the CSS and Javascript that is preventing it from displaying as it should.
Here is the code I'm using: http://codepen.io/anon/pen/ybExq
Sorry there is a lot of it for the plug in!
For whatever reason, there was an unexpected element in the original jquery carousel script. I was able to find it by breaking apart the script into short lines and referring back to the console.

field separation during browser resize

I have this template I'm working on and it's resizeable from full screen to the width of an iphone. My contact form field is fine at full screen, but when I resize my browser, it seperates really bad and not sure how to fix this to keep the fields right under each other. I have a before/after here:
http://www.webauthorsgroup.com/before.jpg
http://www.webauthorsgroup.com/after.jpg

Trying to delete white space in Facebook Like box

I a working on a client's website and decided to add a "Facebook Like Box" (example). I was working in the Facebook Developers page. I am a Joomla developer (2.5x platform) I am trying to figure out how to delete the white space from the title of the like box WAY down to where my pictures are... Any suggestions on how to do this or where I need to go into Facebook to correct this??
I tried to re-size the height, BUT once I did that to make it smaller, it cut off my pictures.
Your help in this matter would be greatly appreciated.
EDIT: ok, stack overflow does not understand the URLs so you'll have to copy and paste or use the short link.
That's a frame, short link: http://on.fb.me/152cjgH
http://www.facebook.com/plugins/likebox.php?api_key=&locale=en_US&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Df108e873a75ab52%26origin%3Dhttp%253A%252F%252Fwww.ordwaybuildingsupply.com%252Ff211d31607a9c7e%26domain%3Dwww.ordwaybuildingsupply.com%26relation%3Dparent.parent&height=558&header=false&show_faces=true&stream=true&width=200&href=http%3A%2F%2Fwww.facebook.com%2Fhome.php%3Fclk_loc%3D5%23!%2FOBS75%3Ffref%3Dts&colorscheme=light
The big white space is the stream so change the values you're requesting, namely
remove &stream=true
and change &height=558 to &height=300 or something
http://on.fb.me/152co4e >
http://www.facebook.com/plugins/likebox.php?api_key=&locale=en_US&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Df108e873a75ab52%26origin%3Dhttp%253A%252F%252Fwww.ordwaybuildingsupply.com%252Ff211d31607a9c7e%26domain%3Dwww.ordwaybuildingsupply.com%26relation%3Dparent.parent&height=300&header=false&show_faces=true&width=200&href=http%3A%2F%2Fwww.facebook.com%2Fhome.php%3Fclk_loc%3D5%23!%2FOBS75%3Ffref%3Dts&colorscheme=light

Unable to highlight/copy text in iPhone Safari on mobile site

I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?

Where does IE9 look for the large favicons?

IE9 has the concept of pinning a particular website to the Windows7 task bar. For certain sites (such as Facebook), it will then display an extra large favicon in the task bar, and also next to the back button.
How do I tell IE to do this for my site?
It's a bit late, but I found the answer above to be somewhat incomplete.
ico files can contain multiple images at the same time. So you can for example put a 16x16, a 24x24, and a 32x32 image inside a single ico file. This way IE can use the image with the most appropriate size. So it will use 16x16 inside the addressbar, the 32x32 for the taskbar (pin), and the 24x24 for next to the back button. If you want them to look better on hi-dpi screens you could use 64x64 instead of 32x32, and 48x48 in stead of 24x24.
You could even use different kinds of images instead of the same image in differently scales; so e.g. just the logo on the 16x16 and 24x24, but the logo and brandname on the 32x32.
One tool for creating such icons is the commandline application png2ico, or icoFx if you like a GUI.
Please read the following article
How to enable IE9 pinning and Jumplists
Create a High Definition Favicon
Standard favicon files are usually 32x32 or 16x16 pixels in size. These look great in the browser but when you pin it to the taskbar it can be a little small and pixilated.
To give the best pinning experience you should use a 64x64 favicon. I used http://www.favicon.co.uk/ to create a 64 x 64 icon file and then uploaded it to my site.
You then need to make sure you are using the new favicon by checking the tag is pointing at the new 64x64 fav.ico file.
Basically you now can create a larger favicon file, and IE9 will use it in the task bar. However, if you have a standard size favicon, IE9 will still use it.
An added benefit is that you can implement an awesome JumpList to enhance the visitors browsing experience.
Further reading: http://www.hanselman.com/blog/IE9SiteSpecificBrowsersAndAddingYourOwnJumpListItemsToPinnedTabs.aspx