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):

Similar Messages

On Mobile - the SharePoint site shows "Please come back later" - on Desktops it works fine?

Hi there,
Any clue why this happens to my SP 2010 site - On Mobile - the SharePoint site shows "Please come back later" - on Desktops it works fine?
Thanks in advance.

Hi,
Just checking in to see if the information was helpful. Please let us know if you would like further assistance.
Have a great day!
Best Regards,
Lisa Chen
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

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/

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

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

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?

I changed my browser fill and the update does not show in the preview mode

I changed my browser fill and the update does not show in the preview mode. I saved and restarted muse but the problem is still there. Any thing else I can do? Could it be something that changed in the file?

Hello,
What did you put in the "browser fill" area, an image or a color? WIth gradient or with solid color? Also, does it show fine if you "Preview in Browser"?
Screenshots showing the Browser fill section (like this: http://screencast.com/t/RHqdVPP4) and the display in Preview mode would also be helpful.
Cheers
Parikshit

Attach Site Elements to Background (browser fill)

Hi everyone.
I am designing a site in Muse. The layout of the home page looks about like this:
I added fill to rectangles to make things a bit more clear. The bachground filled with small grey-striked rectangles is actually this browser fill set to tile.
So you see that the browser fill tiles go well in line with the coilored rectangles.
However, when I resize the page in browser preview the skew off,м obviously. The scale of the site elements does not change in line with the scale of browser fill.
Same thing happens when I resize the browser window.
I do realize that this is the natural bahaviour of Muse (dynamic site layout etc.).
So in this context the questions are:
Is there any way to turn off this dynamic resizing or dynamic site layout?
OR
Is it posstible to attach the site elements to browser fill so that they rescale and move inline with the fill?
(pinning didn't really helped or mybe I just did it wrong).
Or perhaps there is some other solutions that I don't know of...
Thank you very much in advance!!

Hi Sasha!
Did you choose Position "Middle" in image filling tool? If not, so it can cause this problem.
Best Regards
TaikaJim

Browser fill image cuts off at bottom when published from Muse to BC...?

The site previews fine in the browser but when I publish it to BC it cuts off the bottom of the image and just shows the browser fill color (which is dark grey). I'm pretty sure this is a BC issue because everything looks fine in Muse. I have done all I can think of to fix this but havn't figured anything out. Here is some information if it helps. Weird thing is only the img. I used for the header is listed in the css, the img. for the browser fill is not listed.
http://grasslandoregon01.businesscatalyst.com/index.html
Master Page css:
#u7524
          border-style: none;
          border-color: transparent;
          position: relative;
          background: transparent url("/images/header_swoosh.png") no-repeat center center;
          background-size: cover !important;
#u7524_align_to_page,#u7579
          position: relative;
#u32679
          border-style: none;
          border-color: transparent;
          background-color: transparent;
          color: #FFFFFF;
          position: relative;

Hello,
You probably did not find this article at the right time but there is one KB article explaining how to insert the Edge content into a Muse website.
Basically what you have to do is, after you publish the Edge project, to take the exported folder, or just the files, (but I'm totally into taking taking the whole folder) and upload them to your FTP where the Muse site is published. After that just use the "Object > Insert HTML..." option from Muse and paste the <iframe> code from the KB and customize the path to the folder where the files are located and the width & height for the iframe.
KB can be accessed here: http://www.adobekb.com/inserting_edge_content.html
An example can be found here.
- Edge project uploaded to FTP.
- Content of the project folder.
- HTML code
I hope this will answer your question.
Cheers,
Cristian

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

I update my browser to 7, but many sites write me that i use 3.5. Your site show me this messege to (You have old version). But i update my firefox yet. It is my problem :(

i update my browser to 7, but many sites write me that i use 3.5. Your site show me this messege to (You have old version). But i update my firefox yet. It is my problem :(

Your User Agent shows that you are using Firefox 3.5.2. Click on "More system details" to the right of your original question, scroll to the bottom and you will see the following:
*Your User Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.4) Gecko/20091016 '''''<u>Firefox/3.5.2</u>''''' (.NET CLR 3.5.30729)
Reset your User Agent using the following instructions:
*See --> [https://support.mozilla.com/en-US/kb/websites%20or%20add-ons%20incorrectly%20report%20incompatible%20browser#w_reset-your-user-agent Reset your user agent] '''''and''''' [http://kb.mozillazine.org/Resetting_your_useragent_string_to_its_compiled-in_default Resetting your useragent string to its compiled-in default]
*What is a User Agent: http://en.wikipedia.org/wiki/User_Agent
*See --> [https://support.mozilla.com/en-US/kb/Finding+your+Firefox+version Finding your Firefox version]
'''If this reply solves your problem, please click "Solved It" next to this reply when <u>signed-in</u> to the forum.'''
Not related to your question, but...
You may need to update some plug-ins. Check your plug-ins and update as necessary:
*Plug-in check: https://www-trunk.stage.mozilla.com/en-US/plugincheck/
*Adobe Shockwave for Director Netscape plug-in: [https://support.mozilla.com/en-US/kb/Using%20the%20Shockwave%20plugin%20with%20Firefox#w_installing-shockwave Installing ('''''or Updating''''') the Shockwave plugin with Firefox]
*Adobe PDF Plug-In For Firefox and Netscape: [https://support.mozilla.com/en-US/kb/Using%20the%20Adobe%20Reader%20plugin%20with%20Firefox#w_installing-and-updating-adobe-reader Installing/Updating Adobe Reader in Firefox]
*Shockwave Flash (Adobe Flash or Flash): [https://support.mozilla.com/en-US/kb/Managing%20the%20Flash%20plugin#w_updating-flash Updating Flash in Firefox]
*Next Generation Java Plug-in for Mozilla browsers: [https://support.mozilla.com/en-US/kb/Using%20the%20Java%20plugin%20with%20Firefox#w_installing-or-updating-java Installing or Updating Java in Firefox]

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.

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;

Mobile version of website – not filling the screen

I'm building a mobile version of a website and I want the site to be 221 pixels wide to fit nicely into a mobile device's screen. However, when the site is viewed from a cell phone, it comes up tiny and I have to zoom in to get it to fill the screen.
Anyone know how to make it open zoomed in already?
Here's a link to the site: http://www.lakesideinn.com/mobi/
//Hanna

This solution works great for iPhone but have noticed that it does not work for PC or Blackberry phones. The code I used to fit the page to the screen was "
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">"
but it does not work on PC or Blackberry
~ Scott

Mobile version of site shows extended browser fill

Similar Messages

Maybe you are looking for