Creating mobile version of site

recently i did a site for a friend and got it posted on the internet.. It looks good fo a beginner site. However, looking at it on a mobile device it is not so ight. This is because i have not ceated a mobile css. I looked at a video and tied to follow what it said, however i still cant get it to appear right.. Helpo me please...

What Adobe product are you asking for help with?

Similar Messages

Can the desktop and mobile version of site share one News Announcement module?

Hello. Can I make the News Announcement module work for both the desktop and phone version of a site? I want to use one set of News Announcements so have created a separate template for the desktop detail and the phone detail.
On the mobile News page, seen here, news - Latest News (make sure you reduce the browser to a phone size) I have altered the module code generating the announcement list from {module_announcement,a,,,,} to the following so that it uses a mobile specific template (as suggested on the BC help page here Business Catalyst Help | Using custom templates for modules). The template is in the Templates folder.
{module_announcement,a template="/Templates/MOBILE-INNER-News-pages.tpl"}
But it isn't working yet, on selecting a news item link on the mobile version the detail loads but it is the desktop version not the mobile version. Is my code snippet wrong? The news items themselves have been assigned the desktop version template which I imagine could be the problem. Is there a way around this or do I have to create two sets of news announcements, one for desktop the other for phones?
Cheers for any help with this.
Grant

http://www.edgewoodcommunity.org/phone

Mobile Version of Site Using Wrong Assets

I have my site previewing on businesscatalyst and it looks perfect on desktop, but when I view it on mobile, it is showing mainly text and images from the template I used that I have deleted and replaced with my assets. Why are these still showing up only on mobile instead of what I have replaced it with.

Can you check the mobile version of the website on your desktop by adding a '/phone' to the URL.
If you are able to see the same text and images from the template, then I would advise to check the mobile version of your site in Muse :
Regards,
Akshay

Firefox mobile shows full version of sites instead of mobile versions of sites only.

When I visit sites on firefox mobile ( i have the experimental version for phones like the HTC Hero that use the SENSE version of Android)
Firefox mobile will show the whole main site instead of mobile versions. if a Site has a mobile version, Id prefer it to show that version.
Also when i go to put information into a form on the page, for example a log in, it makes the screen REDICULOUSLY large and a grey bar with an arrow goes right across the middle of the screen. On the native android browser i can enlarge the form just big enough to see type in my details and then hit enter. On firefox its somewhat of a nightmare trying to log into anything.

You can ask your favorite sites to add mobile Firefox (Fennec) to the list of mobile browsers they detect. Until they do, you can use the add-on "Phony" to make the sites think you are using a different mobile browser: https://addons.mozilla.org/en-US/mobile/addon/162014/

Mobile version of site shows extended browser fill

I have a little problem I was wondering someone might be able to help me out with.
www.communitychestscpr.com/index.hml
www.communitychestscpr.com/phone/index.html
on the mobile version of this site I have made, there are a couple of instances, Home, Pricing and Contact, where the length of the page seems too long, to where the site shows too much of the brower fill, and extends the length of the page for some unknown reason.
Any thoughts on what might be causing this and how to fix it are very welcome.
Regards.

Hi Vinayak,
I have been testing it on my iphone 4s. The website is up and running. I don't believe it is the sticky footer thing which is the problem. The master page displays at a certain length - what is the minimal page length (as there is no content on there which is making it longer), but it seems that this does not correspond to the length of pages in the file - so that shorter pages which should fit perfectly onto the master end up having a space beneath the content and above the footer.
Shows the website on the Home Page, and the empty space beneath the content (and above the footer):
Shows the website on the Pricing Page, and the empty space beneath the content (and above the footer):
Shows the website on the Certification Home page, and no empty space beneath the content (and above the footer):

Trouble with mobile versions of site

I have designed a very simple two-page site at charlestonskinnyjeans.com and I am trying to offer my client a mobile optimized version. When I preview the phone design in Muse, everything looks fine. When I actually pull up the site on my phone (Samsung Galaxy SIII), it shows the phone design but with huge amounts of gray space on the right and bottom. It's not loading at full width.
I have checked the design board and cleared any hidden frames. I don't think I have any effects that go outside the content margins.
I'm stumped. Please help!

Laura,
I'm going through the same thing. If I find an answer I'll let you know. Please do the same for me.
Jack

Adobe Muse: Create Mobile Versions | Adobe Evangelists - Terry White | Adobe TV

Design unique tablet and smartphone versions of your websites. Control the content, style, and interactivity for each device.
http://adobe.ly/RP3lxx

No info on mobil device in this show. ? wrong video

Adobe Muse: Create Mobile Versions | CS6 & Creative Cloud Feature Tour for Design | Adobe TV

Design unique tablet and smartphone versions of your websites. Control the content, style, and interactivity for each device.
http://adobe.ly/RP3aSP

Also would be nice if you let everyone know how to export from Animate as this might be confusing. You need the OAM file when placing in Muse or Dreamweaver, to get that, you will have to go into your publish settings in Animate and check Animate Deployment Package... Hope this is helpful...

How do I create a mobile version of a site that is based on scroll effects and a slideshow background?

I need to create a mobile version for a site that is based on scroll effects and a slideshow background.
Is it possible to copy the format from the desktop version without re-designing all the elements?

Hi
Different renditions will use require the page elements to be optimized accordingly.
So you can surely copy the page elements and paste in phone or tablet layout , but you would need to modify them.
Thanks,
Sanjit

How to create a mobile version of iWeb

I need to convert my iWeb website to a mobile version, what is the easiest way to do this? What software or program should I use? I was told that creating a Wordpress Page is the simplest way

Thanks for your patience and assistance.
I have been putting crusadeforjustice.com and my iPod touch and my friend's iPhone 4 and other friends' blackberry's all say that the site doesn't exist. My friend downloaded iCab for his iPhone 4 and he was able to get it to work. iCab allows you to change the browser ID to whatever you want, such as Safari for Mac (mobile version and non mobile version), Firefox, IE, etc... He changed it to Safari Mac and the site displays just as your picture illustrates. Then he changed it back to Safari Mobile and that's when the error message appears. But it seems you cannot change the browser id on the default Safari Mobile app, which is what most people use. So I gather Safari Mobile will attempt to load a mobile version of any given site? It's odd... Will recreating the site usiing Flux help solve this problem?
Any other ideas or thoughts?
Many thanks...

Is it necessay to add a canonical tag to tablet and mobile versions of a Muse site?

Is it necessay to add a canonical tag to tablet and mobile versions of a Muse site?

I know that they don't actually touch anything on the site. However when you create a tablet version of your site, they "take care" of the redirection to the tablet version. So I am wondering if a search engine views the tablet version as duplicate content when everything is nearly the same... or does muse put something in the code that would let robots know this like a canonical tag?

Muse site shows mobile version in Chrome but not in Explorer

HI
I have recently started making websites in muse. I have made desktop and mobile versions of the website. When I view the website on my Surface Pro 3 (with its hi resolution 12inch screen) in Chrome or Firefox it will only show the mobile version and I can't make it change. However when I view it in Explorer or Safari it shows up as desktop. I really need this website to display constantly. Has anyone got any ideas?
- I have tried to make Chrome display the desktop version but it wont do it.
- I've tired zooming in and out
- The website is www.metech.co.nz
- I have thought about adding a tablet version that looks like the desktop

Hello,
I just navigated to the site your provided on our Surface Pro 3 and was redirected to the desktop layout you created.
Can you try the following for us?
Delete ALL of the cache and cookies in the browser
Chrome: Delete your cache and other browser data - Chrome Help
Firefox: How to clear the Firefox cache | Firefox Help
Navigate to your site in the browsers experiencing the issue (www.metech.co.nz)
Also can you tell us the following?
Is your site hosted on Business Catalyst or a third party server (ex. GoDaddy, Blue Host, etc.)?
If it is hosted on Business Catalyst, do you recall which option you selected from the "Redirect" drop-down when publishing the site? You can access this by doing the following:
Open your Muse file
From the "File" menu select "Publish to Business Catalyst"
Click on "Options"
Observe the option that is selected by default for the "Redirect" drop-down
If you could let us know if this resolved the issue or not we would greatly appreciate it.
Thanks!
Marc

Why can I only see the mobile version of certain websites instead of the full site?

some website are shown only in mobile version instead or full version, even when I click on the link that says "full site" I get redirected to the mobile version. This only happens in Firefox since I've tried other browsers too.

Clear the cache and the cookies from sites that cause problems.
"Clear the Cache":
*Tools > Options > Advanced > Network > Cached Web Content: "Clear Now"
"Remove Cookies" from sites causing problems:
*Firefox/Tools > Options > Privacy > Cookies: "Show Cookies"
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe mode start window or otherwise make changes.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
Try to boot the computer in Windows Safe mode with network support (press F8 on the boot screen) as a test to see if that helps.

The mobile version of my Muse site doesn't display full width

Can anyone help me figure out how to make the mobile version of my site display full width? I've snapped everything to the full width using the blue lines, but the whole site is left justified. I reviewed the master page and everything seems to be in order.

You most likely have an empty box or text box that is off to the right in your design. Do a select all on your Master Pages and pages to see if you have any elements outside the right side of your design.

Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries?

Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries? Here is the layout in desktop view, red being what would be images. And when i rescale, the content stacks together to place two of the same boxes together, like so;
Is it possible to apply a rule so when scaled the boxes reorder to show red, black, red, black, red, black?

<div class="productcontainer3">
<div class="product3"></div>
</div>
<div class="productcontainer4">
<div class="product4"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
</div>
<div class="productcontainer1">
<div class="product1"><h6>Manta Soledo</h6><p1> In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant.</p1> </div>
</div>
<div class="productcontainer2">
<div class="product2"></div>
</div>
<div class="productcontainer5">
<div class="product5"></div>
</div>
<div class="productcontainer6">
<div class="product6"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
.productcontainer1 {
float: left;
clear: both;
max-width: 604px;
width: 49%;
margin-right: 1%;
margin-bottom: 4%;
margin-top: 1%;
@media all and (max-width: 600px) {
.productcontainer1 {
width: 100%;
.productcontainer2 {
float: left;
max-width: 604px;
width: 49%;
margin-bottom: 4%;
margin-top: 1%;
@media all and (max-width: 600px) {
.productcontainer2 {
width: 100%;
.productcontainer3 {
float: left;
clear: both;
max-width: 604px;
width: 49%;
margin-right: 1%;
margin-bottom: 4%;
@media all and (max-width: 600px) {
.productcontainer3 {
width: 100%;
.productcontainer4 {
float: left;
max-width: 604px;
width: 49%;
margin-bottom: 4%;
@media all and (max-width: 600px) {
.productcontainer4 {
width: 100%;
.productcontainer5 {
float: left;
clear: both;
max-width: 604px;
width: 49%;
margin-right: 1%;
@media all and (max-width: 600px) {
.productcontainer5 {
width: 100%;
.productcontainer6 {
float: left;
max-width: 604px;
width: 49%;
@media all and (max-width: 600px) {
.productcontainer6 {
width: 100%;
.product1 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
.product2:hover {
background-image:url(../Graphics/iMod-rollover.jpg);
.product2 {
Width: 100%;
background-image:url(../Graphics/iModindex.jpg);
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
-webkit-transition: background-image .8s ease-in-out;
-moz-transition: background-image .8s ease-in-out;
-ms-transition: background-image .8s ease-in-out;
-o-transition: background-image .8s ease-in-out;
transition: background-image .8s ease-in-out;
.product3 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
background-image:url(../Graphics/Ilanoindex.jpg);
-webkit-transition: background-image .8s ease-in-out;
-moz-transition: background-image .8s ease-in-out;
-ms-transition: background-image .8s ease-in-out;
-o-transition: background-image .8s ease-in-out;
transition: background-image .8s ease-in-out;
.product4 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
.product3:hover {
background-image:url(../Graphics/Ilano-rollover.jpg);
.product5 {
Width: 100%;
background-image:url(../Graphics/Soledoindex.jpg);
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
-webkit-transition: background-image .8s ease-in-out;
-moz-transition: background-image .8s ease-in-out;
-ms-transition: background-image .8s ease-in-out;
-o-transition: background-image .8s ease-in-out;
transition: background-image .8s ease-in-out;
.product5:hover {
background-image: url(../Graphics/Soledorollover.jpg);
.product6 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;

Creating mobile version of site

Similar Messages

Maybe you are looking for