Stack 2 sidebar layout in dreamweaver for mobile

I have a 2 sidebar liquid layout in dreamweaver (still on CS5 unfortunately so limited media queries) that I want to size for a mobile device and stack both sidebars on top of the content. I've tried pasting both sidebars into the navbar at the top in the mobile css but its not working.
Can anyone help me with this?
Thanks

Some ISPs offer a small free web space as part of your plan (Earthlink, Verizon, AT&T).
There are some free web hosts you can use like this one:
http://www.000webhost.com/
-- but they're never as good as a real hosting plan that you pay for.
Nancy O.

Similar Messages

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!

How to setup a default direction for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

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

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

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

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.

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

How to edit fluid grid layout in Dreamweaver CS6

Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your help
Trevor

In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement. That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop. It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only. Use a seperate stylesheet for your content styles.
Nancy O.

Dreamweaver with mobile devices?

Hello,
Is it possible to program with javascript for mobile devices?
Is there any plugin for Dreamweaver to make this easier? (as Appcelerator)
thanks
hostings y dominios | Ropa de marca online | Productos de peluquería

DW CS6 has Fluid Grid Layouts (with CSS Media Queries) and support for jQuery Mobile.
CS6 Fluid Grid Layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
CS6 jQuery Mobile (9 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/enhanced-jquery-mobile-support/
Nancy O.

Creating a site for mobile devices

Good morning,
I have a number of questions relating to the creation of a
site for mobile devices. My client has given me the assignment to
re-design his current website, and to also create a sub-site
suitable for mobiles. I have spent a number of hours looking around
on the Internet and trying to gain a better understanding of these
issues. Still, a number of questions remain. if you can give me any
additional understanding, that would be great.
Question 1:
Is my understanding correct: I basically need to create two
sites, one for the wide-screen browser, and one for the mobile
browser? I can direct visitors to the mobile site using a CSS or
javascript link - if their browser identifies them as a mobile
browser?
Question 2
Mobile devices come in all sorts of shapes and sizes and
versions. PDA\s and iPhone's have different screensizes and
resolutions that smart--phones, which in turn are different again
from older and simpler phones. Should I design a site for a number
of different types of phones? That would a huge amount of work...
Question 3
I also own Device Central, an App which I should think is
very useful in this situation. But I fail to understand it! OK, so
I can see what my photo or website or flash file looks like on my
Nokia N73 - but I am not designing specifically for that phone. I
also want my design to look good on all the other phones! My client
needs a website that is not tailored to one phone, but to all
phones.
Question 4
And why does Device Central not have profiles for the iPhone?
I would think it is popular enough to warrant its own profile... (I
post this from the Netherlands, where the iPhone is not carried
yet, and so I have only ever held one in my hand). Is this because
the iphone can see regular sites just fine?
Question 5
How does Dreamweaver help me build a mobile site?
Question 6
My client wants to show video on his website. In fact, that's
what this website is all about: showing sports-videos from high
profile sporting events. Which video-formats are most suitable?
Question 7
Do all mobile phones support flash? Or only a few? Or none?
It seems to me that a flash website would allow for more creativity
in the design.
Thanks for any help you can give. Any resources you could
point me to are also very welcome...
Sincerely,
Rogier Bos
Rotterdam, The Netherlands

Macnimation wrote:
> Hi,
>
> I'm experimenting with creating a small site off a
standard site, for mobile
> phone/devices.
>
> Basically, I want to load a basic list page, which has
links to pages that
> will display and run flash movies.
>
> The flash movies, in FLV format are already at 640 x 480
which run fine in the
> main site.
>
> Is it simply to resize the movies to fit the mobile
content size , or will
> they "auto" resize?
>
> Do I have to chnage the webserver configuration in
anyway, its a standard IIS
> site at the moment, but MySQL with apache is also an
option.
>
> Would standard html do or would the pages have to be
done using xhtml or wml?
>
> I would like if possible to get this infomration first
before starting it, so
> I can possibly reduce delays.
>
> Any help or pointers to tutorials would be grateful
>
I'd like to check out the PDA scene some day soon, too. In
the meantime,
there's a recent discussion of this topic here:
http://www.sitepoint.com/forums/showthread.php?p=3288343#post3288343
www.geobop.org - Family Websites
www.invisible-republic.org - Adult political websites (Mature
adults only)

I cannot watch video's in the mobile web without a currect flash player for mobile phone! what virsion of player i need?

I can't watch video's in the mobile web without a currect flash player for mobile phone's. what do I need to do(what is the currect virsion)?
If you have an answer just send it to me by e-mail!
[email protected]

If you find anything out please share. I have flash projects (SWF) files created in Captivate 5 that play fine in Flash and Dreamweaver, but freeze up on the web in safari, firefox, opera and chrome. Even files that used to play just fine. This upgrade has been a nightmare - I have spent hours troubleshooting to no avail. It does not seem to be a problem for windows users - only macs.

When will Adobe Reader for Mobile Devices support 3D PDF files?

When will Adobe Reader for Mobile Devices support 3D PDF files?

There are two basic varieties of LiveCycle XFA...Static XFA and Dynamic XFA, which are very different in terms of their future for potential support in Adobe Reader for iOS. Which variety of XFA are you using?
Static XFA uses the PDF markup language for content and form fields, so users can view the documents in Adobe Reader for iOS, but we currently do not properly handle filling, saving, and submitting those forms. I have improving our handling of Static XFA on my roadmap, but cannot offer any specific date yet (sorry, policy plus actual uncertainty). I know that there are some other apps that partially support Static XFA, though I do not know how complete their support is. If you can even open the XFA document in Adobe Reader for iOS, it is likely Static XFA.
Dynamic XFA is effectively a JavaScript application packaged inside a PDF wrapper, which generates layout and form fields via code and requires a significant engine to support this. Support for Dynamic XFA is unfortunately not currently on our roadmap for iOS due to the nature of the technology, and our concern that any implementation we try likely will not pass Apple's restriction against installing something that allows other "apps" to be downloaded and executed from within it. The LiveCycle team is exploring solutions for our enterprise customers wanting to use Dynamic XFA from mobile devices as part of their server offering, but I cannot offer any insight here. To my knowledge, there are no applications that handle Dynamic XFA other than Adobe Reader for the desktop platforms (Windows, Mac, Linux).
Dennis

Stack 2 sidebar layout in dreamweaver for mobile

Similar Messages

Maybe you are looking for