Fixed vertical layout for mobile

Hi, I have done the design mobile site by using adobe muse. I want to keep the fixed vertical layout, how can I set to disable the auto rotation funcation for mobile only?
Thanks,
Andy

Hi
I believe you want to restrict the orientation of site when opened in phone browser to vertical.
With native Muse features we cannot stop orientation changing when user rotate its phone to landscape ,though can be done using custom code.
View port helps to change the orientation of the site in device browser. Its not advisable to restrict users from using the orientation they want to use the site, but you can try the suggestions mentioned in the documents :
http://stackoverflow.com/questions/10975387/mobile-site-force-landscape-only-no-auto-rotat e
http://stackoverflow.com/questions/3501510/blocking-device-rotation-on-mobile-web-pages
http://stackoverflow.com/questions/6052400/disable-auto-rotate-in-jquery-mobile-or-phonega p
If this is not what you are looking for , please let me know.
Thanks,
Sanjit

Similar Messages

Creating separate online shop layouts for mobile

Is there any way to create separate shop layouts (catalogue.html, small_product.html, large_product.html, etc) for use on a mobile site. I want to limit some of the information posted to the mobile site--e.g., eliminate custom tags used in large product page-- in addition to having the ability to specify different catalogs per row, for example, on the desktop version, I have my catalogs listed 3 across--on the mobile site, I want them listed 2 across. How do I go about specifying these differences in layouts, desktop versus mobile. What is the protocol for something like this?

Hi Anne,
You should be able to o this with custom templates and the {system_visitorDeviceClass} tag. If you want no coding at all, you should be able to do the following: Create templates for mobile in the same folder as the standard ones (root > Layouts > OnlineShop. Rename all of them to something like mobile_small_product / desktop_small_product
Then you can just use any module by referencing the custom template as {module_product,63882,5450055,_top template="/Layouts/OnlineShop/{system_visitorDeviceClass}_small_product.tpl"
Kind Regards,
Alex

Modify news, web apps layouts for mobile site?

I am modifying an existing website to create a mobile version, placing my mobile pages in a /mobile subfolder. I am having an issue with the news and web apps, as I have already designated my templates and layouts for the full desktop version, and because my news and webapp items cannot be placed into my /mobile folder. So, now I need to display that information differently for mobile and cannot figure out how, since I am limited to a single List Layout and a single Detail Layout (for news. At least the web apps give me an Backup List Layout, which was helpful). How have others accomplished this type of thing??
An example: On my desktop version, I have announcements shown on the homepage as short blurbs (using the list view). My detail view I already have formatted for the full screen desktop version and does not work well for mobile screens. After many attempts at workarounds, I decided that I would simply show the complete announcement for mobile as a List Layout and not use a Detailed Layout at all so that I don't even have to bother with it. My thought was to code both my desktop and mobile list layouts in the List Layout of my Announcements module, and use css to show/ hide the appropriate one.
E.g.--
html in my List Layout:
<div id="standardnews">
<h3>{tag_subject} - {tag_eventfromdate}</h3>
<p>{tag_body, 140}</p>
</div>
<div id="mobilenews">
<h3>{tag_subject_nolink} - {tag_eventfromdate}</h3>
<p>{tag_body}</p>
</div>
on my desktop css stylesheet:
div#standardnews { display:block; }
div#mobilenews { display:none; }
on my mobile css stylesheet:
div#standardnews { display:none; }
div#mobilenews { display:block; }
The css works just fine, however, on my mobile site instead of rendering the event from date, it actually rendered the tag itself "{tag_eventfromdate}". So, apparently I can't have multiple instances of a tag within a single page?? Is there a way around this?
I would be grateful for any input here on the best way to handle this type of thing, given the limitations I am running into.

You can make as many list templates as you like now.
You can have a different template per device - phone, tablet, desktop so if modules are in that template they will then render those different templates and thus different layouts.
If you have modules in pages that page can be differnt per device as outlined under site settings and mobile section.
Unlimited list layouts - http://www.businesscatalyst.com/_blog/BC_Blog/post/Video_Create_custom_list_templates_for_ BC_Modules/
You CAN NOT though have conditional tags in BC yet and you can not in one list layout have tags render differently based on the device.
Style and presentation you use media quries and the System tag for device provided by BC.

Reponsive layout for mobile

I used the Blog Post from the Responsive Starters template and discovered it almost works. My site properly responds to maximum screen, (1580 x 1050) down to tablet (768 x 1024) but it falls apart when it scales down to mobile. I read that I have to create a seperate mobile specific website. Does this mean I need different domains, one for 1580 x 1050 and 768 x 1024 screens and another for mobile? If so, how do I host this and how do I combine two different URL's into one site?

Indie767 wrote:
I used the Blog Post from the Responsive Starters template and discovered it almost works. My site properly responds to maximum screen, (1580 x 1050) down to tablet (768 x 1024) but it falls apart when it scales down to mobile. I read that I have to create a seperate mobile specific website. Does this mean I need different domains, one for 1580 x 1050 and 768 x 1024 screens and another for mobile? If so, how do I host this and how do I combine two different URL's into one site?
Does the template have any media queries for smartphone size? Some developers don't bother much once down beyond tablet size.

Adobe Muse CC 2014 - Sizing/Layout for Mobile Devices

I have designed previous sites with Adobe Muse and have never had any issues designing or sizing for any of the three devices whether desktop, tablet, or phone versions. However, due to the most recent updates I decided to design a site through Adobe Muse CC 2014 (www.movemoreheadforward). I went ahead and designed tablet and phone versions of the desktop site as well but unfortunately I ran into the problem below.
The first image is what the phone site comes up as and the second image is what I would like it to look like. I didn't touch the page width so I'm confused as to why the site comes up so small. Would this have anything to do with the new 100% page width option?
The same goes for the tablet version however I do not have images to give as an example at this time. Does anyone know why this issue may be happening and how to go about fixing it? Thanks!

You have an object to the right of your page. (blue block), that's what's making your page smaller.

Vertical layout for forms

Hi everybody,
I need to create an Adobe Form in WDP Java. This form must be vertically arranged (i.e. to read it you should rotate 90 degrees) because some tables are very large and wouldn't fit the page otherwise.
Note that only some pages are arranged this way, others are regularly arranged.
How can I do that?
Thanks
Vincenzo

Hi Vincenzo,
You can change the paper size and layout from portrait to landscape.
HOpe this feature will aid you.
Thanks and Regards,
Antony John Isacc.

How to create a tall page vertical layout for ipad from indesign

Kindly support me to create this page
tell me how to create a lay out for cover image and bottom text
Looking forward to hear from you soon,
Thanks & Regards,
Ajwan Arouje

I have invented myself,
Thanks

ProductList layout vs. ProductFeatureList? for Mobile?

Hi folks,
I'm running into a very bad problem for mobile.. When viewing catalogs in the Overall Template for ecommerce, the table layout is a total mess.
The problem does not occur for example on the home page (http://joden.businesscatalyst.com) where the featured images are liquid and work very well:
{module_productfeaturelist,featured,6,Alphabetical,_blank,}
But on the overall catalog layouts, the default {tag_productlist} creates an illiquid table that does not display at all properly on mobile.
http://joden.businesscatalyst.com/antique-jewelry
Is there a way to fix this problem for Module Templates> Online Shop> Overall??
Thanks
Jeff

You can set the tag_prouctlist to display as an unordered list instead of a table. Here's the docs on the tag:
{tag_productlist,productsPerRow,targetFrame,resultsPerPage,sortType,hideEmptyMessages,useL i}
Just set the useLi to true.
Dan

NI Measurement Suit for Mobile/Fixed WiMAX 1.0 , is there any optiion to enable PUSC or AMC for the generated signal?

Hi.
I am using a NI VST to generate WiMAX signal. I have installed NI Measurement Suit for Mobile/Fixed WiMAX 1.0 on the compute. But I can't find any option on the front pannel of the generation suit to enable AMC or PUSC for generated signal. Does such feauture exist at all?
Thanks.
Solved!
Go to Solution.

Hello sam2013ni,
This is all that I am seeing for AMC and PUSC. Look in 'Zone Type'.
Best regards,
K. Anderson
Applications Engineer
National Instruments

In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps!

Hello, My iph5s screen cracked according an accident I just had it since February with threeG mobile network , I have been told I can replace my phone or get it fixed by apple for free, can you please let me know what should I do about this matter ?

Hello, My iph5s screen cracked according an accident I just had it since February with threeG mobile network , I have been told I can replace my phone or get it fixed by apple for free, can you please let me know what should I do about this matter ?

Oh well that's what I heard because it's about the 90 days warranty ,,. Anyway can you please tell me what I can do to get it fixed ? It's a not really big crack in the right bottom side of the screen

3 bar icon for mobile layout

On the mobile layout for my website, I want to have a 3 bar icon to click on which will make the menu bar slide out. How can I do this?
Thanks,
Johnathon

This video explains the steps :
https://www.youtube.com/watch?v=Thm8bsNccvI
Thanks,
Sanjit

UIX: horizontal layout for messageRadioGroup

Hello,
We use UIX 2.1.7.
In our application we have a few UIX xml pages that create a (dynamic) list of screen items based on database
content. These screen items can be text items, date items, choise fields, checkboxes or radio groups, depending on what got queried from the database. In the UIX xml, we have implemented this by a table iterating over a DataObjectList with fields, and a switcher bean to render the corresponding UI widget for each field in the list.
This all works very well, there is only one layout shortcoming we can't seem to fix. When rendering a field as a radio group, we use the messageRadioGroup tag, and use the childdata attribute to create the individial radio buttons. Unfortunately, these buttons are stacked vertically, while we would really like to have them horizontally because of the huge amount of screen space this would save (we sometimes have dozens of radio groups, all with 4 radio buttons. There does not seem to be a way to do that using the messageRadioGroup.
I am aware of the possibility using the radioButton tag, but due to some issues with our (already very complex, conditional and nested) databinding and the code responsible for handling the screen when the user presses 'save', we REALLY prefer having just a single UI widget in the UIX page for a radio group, just as for all the other widget types as described above.
Is there anything we overlooked in the messageRadioGroup tag, and if not will it be possible to include this functionality in a future release?
Thanks!

Peter -
We would much prefer to avoid introducing new layout behaviors into the radioGroup - and encourage clients that require different types of layouts to use the radioButton component. In your case, it sounds like you might benefit from putting your "horizontal" radioGroup layout into a UIX template, so that it can be easily accessed from your uiXML pages. For example, here is a sample template which implements a horizontal layout for radio buttons:
<?xml version="1.0" encoding="UTF-8"?>
<templateDefinition xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ui="http://xmlns.oracle.com/uix/ui"
xmlns:data="http://xmlns.oracle.com/uix/ui"
targetNamespace="http://www.example.org/demo/templates"
localName="horizontalMessageRadioGroup">

<type base="ui:inlineMessage">
<attribute name="childData" javaType="oracle.cabo.ui.data.DataObjectList"/>
</type>

<content>
<inlineMessage data:prompt="prompt@ui:rootAttr">
<contents>
<flowLayout>
<contents data:childData="childData@ui:rootAttr">
<radioButton data:name="name@ui:rootAttr"
data:text="txt"
data:selected="selected"
data:value="val"/>
</contents>
</flowLayout>
</contents>
</inlineMessage>
</content>
</templateDefinition>
And here is a sample UIX page which uses both a standard messageRadioGroup as well as a horizontalMessageRadioGroup to render the same set of inline data:
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns="http://xmlns.oracle.com/uix/controller"
xmlns:ui="http://xmlns.oracle.com/uix/ui"
xmlns:data="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:demoTmps="http://www.example.org/demo/templates">
<templates xmlns="http://xmlns.oracle.com/uix/ui">
<templateImport source="horizontalMessageRadioGroup.uit"/>
</templates>
<content>
<dataScope xmlns="http://xmlns.oracle.com/uix/ui">
<provider>
<data name="RGData">
<inline>
<btn txt="Longer name" val="Val0"/>
<btn txt="Name2" val="Val1" selected="true"/>
<btn txt="Name3" val="Val2"/>
</inline>
</data>
</provider>
<contents>
<labeledFieldLayout>
<contents>

<messageRadioGroup name="group1"
data:text="txt"
data:value="val"
selectedValue="Val2"
type="radio"
prompt="Verical Group"
data:childData="btn@RGData"/>

<demoTmps:horizontalMessageRadioGroup name="group2"
prompt="Horizontal Group"
data:childData="btn@RGData"/>
</contents>
</labeledFieldLayout>
</contents>
</dataScope>
</content>
</page>
Please give this solution a try and let us know the results.
Andy

Embedded video HTML won't work for mobile

Hi,
I have a video successfully embessed on my desktop site but I can't get it to work for mobile:
You can see it here on the desktop: MTV ART HOUSE MOSCOW
I put the same code in for the mobile version, all I did was change the width and height, can someone please help me fix this?
<video controls="controls" preload="auto" width="1010" height="581" autoplay="autoplay">
<source src="assets/trailer.mp4" type="video/mp4">
</video>
For mobile I changed it to:
<video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
<source src="assets/trailer.mp4" type="video/mp4">
</video>

Hello,
Please try to enter the code below in phone layout. (I have marked the change in bold)
<video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
<source src="../assets/trailer.mp4" type="video/mp4">
</video>
Muse create phone layout content in a new folder named as "Phone" as there is no asset folder there we need to correct the directory path in phone layout. I have corrected that in your code.
Regards
Vivek

How can I specify a different css file for mobile browsers?

I'm experimenting with updating our website to be "mobile friendly". I could use some help.
We use a lot of static HTML landing pages for things like links from email ads, etc. What I'm trying to do is have 1 landing page so the content/html page is always the same, but the page will detect what browser/device you are using and then load a different css file depending on what it is. But, we don't want to have to load the style info from the PC version if you're not on a PC.
What I'm doing now is specifying the media type in the css link, like this..
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css">
What's happening is it's loading the main stylesheet first, and then the 2nd one changes some styles if you're on a device with a max width of 480 pixels (like an iPhone). But since it's loading the PC styles first, it's making some things look screwy.
So, is there a way to say "If you're on a PC, load this stylesheet. If you're on an iPhone, load this one instead." .. without javascript? I don't trust javascript too much on mobile devices. I feel like this some simple little thing that I'm missing that will make it all automagically work.
We don't want to have different content depending on the browser, just different stylesheets. Can anyone help?

Hi
Would it be better to do 2 different stylesheets, or just one big one and add a section at the bottom like:
@media only screen and (max-device-width: 480px) { .styles {whatever: styles;} }
2 separate style sheets are recommended. The reason for this is that the Safari mobile browser, (as used in iPhone etc) will download any/all images specified in a style sheet even if they are not used or specified in a media-query rule, this is a know bug with that browser.
I'm also having a new issue where the style "clear: both;" doesn't seem
to be working right. I set up my top horizontal menu using float: left,
and there's a lot of links so on the smaller screen it wraps, which is
fine but now the wrapped links are floating over the page content...
This is one of the reasons that floats should not be used in style sheets for mobile devices, the only exception I know of is for small typographical feature such as 'pull-quotes', (and never use float: right;). It is also recommended to include a menu at the bottom of the page, (or at least a link back to the top).
It works, if I have the iPhone as portrait it looks great, but if I turn
it to landscape, everything is zoomed in. But if I switch back to
portrait, everything is the right size. Is there any kind of way to get
the landscape to have the normal zoom level? I know I can do
"initial-scale=1.0", but that is just for when the page loads, not if
you change it afterwards...
I have heard of only one recommendation to fix this and that is a page refresh on resize, but due to bandwidth limits now being implemented by many providers it is probably not a good idea, you could try setting -
maximum-scale = 1.0
as well.
PZ

Fixed vertical layout for mobile

Similar Messages

Maybe you are looking for