Responsive catalogue layout

Hi first post. I'm starting a site that will be responsive using CSS media queries. I'm really stuck on how to make the catalogue layout responsive, eg number of catalogues per line different depending on device. I use {tag_cataloguelist,2} to show 2 on a line, but i'd like 4 for desktop screen. Same thing with individual products. I have to use {tag_productlist,3} but it's squashed on a mobile and sparse on a desktop. I'd like 6 products per line on a desktop but only 1 for mobile.
Read lots, tried tech support but no joy. Anyone to the rescue? Can it be done?
Catherine

Make things li list layouts where you can. Then things will flow rather then using the default table layouts.

Similar Messages

  • RoboHelp HTML 11 - If I publish using a responsive HTML5 layout, will the output be available to users who want to view it offline? Or does it require an internet connection and a browser to view?

    I am writing help content for software that has two essential components - one web-based and the other a locally installed app (our users work in both). I need the help documentation to be available from both and I wanted to use the new responsive HTML5 layout to make it accessible from a PC, tablet or smartphone while publishing from a single source, but the locally installed app allows users to work offline so I need the help to also be accessible when a user works offline. Is this covered with responsive HTML5 publishing or do i need to publish the documentation to an application help viewer as well?
    I apologize if there is an obvious answer to this. I am new to this and I have already checked the RoboHelp user guide and the FAQ and forum to try and find the answer.
    Thanks for your help.
    Cat

    Hi there
    While I agree with Jeff that CHM is a bit long in the tooth, it's still extremely viable. The only real issue with it is that it's PC only. Specifically, Microsoft Windows PC only. So that rules out Android and other platforms.
    Yeah, HTML 5 is like the cool new kid on the block that doesn't play by the regular rules. But also like that same kid, it is a bit unpredictable. If it were me, I'd maybe experiment with WebHelp. ESPECIALLY if you have a fondness for customizing the look and feel of things. WebHelp customizations are so much easier to implement than the HTML 5 stuff in RoboHelp. I'd rather be forced to stick red hot needles into my eye sockets than to have to deal with that type of customization in RoboHelp. Not to mention needing to have a really good grasp of CSS and HTML 5 coding as well as RoboHelp Widgets. There are probably fewer than ten folks on this planet that can easily handle this.
    Cheers... Rick

  • APEX Theme 25 - Responsive Grid Layout Question

    Hi
    What is the best way to control an item to be positioned right next to the other item on the same row.
    I have a select list that I would like to have an edit button right next to it.
    I created two items for example:
    P_MY_SELECT_LIST Grid set New Line to Yes, Auto
    P_MY_EDIT_LINK Grid set New Line to No, Auto
    But it is not doing what I expected.. what am I missing?
    When it was tables not divs I had no trouble but now I need to learn the kep to using the Grid.
    When I hard code the edit in the Post Element of the item it works great with 2 spaces... but I can't control the item by the AUTH Scheme. I don't want them to show up unless you have the proper role.
    Plus, I want to learn the new 4.2 way!
    Thanks, Bill

    Hi Scott, Bill,
    Because Theme 25 relies on grid for most of it's positioning, it is difficult to do accomplish what was sometimes much simpler when using the tables approach for form layouts. This also happens to be one of the biggest issues with Theme 25: proper form and label positioning.
    If we look back to using tables for form layout we would see that a structure would be created immediately when we started laying out items. Because of the way tables behave, whatever the size of your first label was controlled the width of that cell, and the cells below it. Meaning all of your labels would line up, but only take the space necessary to fit your label.
    However, with a div-based grid, this is no longer possible. There is no structured set of cells that grow / contract together as there are in tables. Because of this, it is difficult to determine the width of a given container and apply that same width to others (for example, picking up your largest label, and applying the width of that label container to the other labels which are below).
    One way to go around this problem, and what we've done in Theme 25, is to used fixed-width labels. So we explicitly set the width of labels, and that makes the layout much more predictable. We know that labels will always be a certain width, and that input fields that follow will begin from the same position. However, this is very different from how forms in tables work:
    1. All labels are the same size, so even if a label is very small, or very large, it will take the same space.
    2. We can no longer align two items be right next to each other without using grids.
    3. When using grids, we have to be mindful of the label's fixed width as it can be larger than the column it is contained in.
    We're working on a cleaner approach to this problem so creating responsive applications and laying form items is easier than it currently is. In the meantime, you can override several styles to help your particular use case.
    Here are just a few styles you can apply to your page to get form alignment to behave (with a specified region static id):
    1. Manually setting the widths of labels for a given region:
    #my_region div.fieldContainer.horizontal>label {
        width: 80px;
    #my_region div.fieldContainer.horizontal div.fieldControls {
        /* width above + 16px spacing */
        margin-left: 96px;
    2. Set Label widths to only take up the space they need:
    #my_region div.fieldContainer.horizontal>label {
        float: none;
        width: auto;
    #my_region div.fieldContainer.horizontal div.fieldControls {
        margin-left: 0;
        display: inline-block;
    3. You can allow fields to float left:
    a. Add to your inline CSS:
    #my_region div.fieldContainer {float: left;}b. Set grid layout attributes for your second item as follows:
    Start New Row: No
    Column: Automatic
    New Column: NoYou can combine these together as well. For example, applying styles #2 and #3 will let you position elements side by side and immediately after each other.
    Scott,
    For some of your issues in particular, here are some possible ways to go around them:
    1. Password field being cut off
    In addition to setting the size of the field to 60, you can apply an inline style to control the width by setting the HTML Form Element Attributes field to:
    style="max-width: 100%;"This will restrict the size of input field to be a maximum of 100% of it's container, and should no longer be hidden when your window is resized.
    2. Customer Report obscured
    You can add an inline style to your page header to set this region's content to scroll. For example giving it a static id of my_region and adding the following to your page's inline css field:
    #my_region section.uRegion>div.uRegionContent {overflow: auto;} Hope this helps!
    Shakeeb

  • Confused Re: Responsive Design Layout

    It appears that I missed the change in Dreamweaver's layouts in my recent upgrades. I used to be able to choose php, and I could then choose between single-column, one or two sidebars, with or without headers and footers, fixed, liquid, etc.
    Now I have Dreamweaver CC, and I can only choose one or two sidebars / fixed width. If I opt for a Fluid Grid Layout instead, there are no options for headers, footers or sidebars - and it apparently doesn't work with PHP. If I change the extension from .html to .php, then I can't write PHP code in it. (The PHP tags aren't highlighted red, at least.
    So I'm thoroughly confused.
    I have several websites with a variety of page types. I started experimenting with responsive design some time ago and generally have the hang of it, but I'd like to start fresh with a new layout, which will hopefully fix a few problems. All of my pages have a header and footer. Most have just one column or one sidebar (usually right), but a few have two sidebars.
    Anyway, can anyone suggest some good layouts to get me started? (I'm using a Mac with Mavericks and MAMP.)

    Geobop wrote:
    Wow, Bootstrap looks interesting, though maybe a little intense; kind of like Drupal.
    In fact, I've been thinking about upgrading to WordPress or Drupal one of these days, but it looks like Bootstrap does a lot of the things they do.
    Bootstrap is just a responsive framework unlike Wordpress and Drupal which are first and foremost Content Management Systems where developers produce 'template themes' - most now responsive.
    Bootstrap as far as I'm aware is not a CMS.
    If you want good looking out of the box design themes then dive into Wordpress it might be for you. Personally I don't like the bloat you get with it and the code either.

  • HTML Responsive Layout for tablet and phone is not showing icons correct on a converted help file

    I am using the Responsive HTML Layout in RoboHelp 11.  On all of my new help files, the layout works great and my icons are showing appropriately.  On all of my old help files that were converted, my icons do not fit within bar for the tablet and phone.  I am using the Government Theme (Theme2_Government), but modified the file to have our colors and logos.  I exported the .slz file and I am using the same slz file in all of the help files.  The only help files that are cutting off the icons are the help files that were converted from previous version of RoboHelp.  Any idea why this would happen?

    This is from the converted file showing the icons that are cut off in the blue bar.
    This one is from a new help file and the icons fit within the blue bar.
    The same thing happens the phone layout with the bar at the bottom.

  • Different layouts for different catalogues?

    Hi there,
    Our current catalogue layout is where the items are displayed (2 across x 20 down) plus the catalogue description at the very bottom of the page.
    I'd like to make one of the catalogues have an image up the top, then a description, then the items (2x20).
    Does anyone know the best way to do this?
    I tried to create a new page and add modules of products and catalogues etc but I can't get the products to show like the small layout (the standard layouts).
    Any ideas?
    Thank you.

    Anyone?
    We decided to create a new template and listed the image up the top but now all the large product layout images have this top image and the amount the customer needs to scroll is too long.
    Any ideas on how to put an aimage up the top of the catalogue page and ONLY the catalogue page?
    Thank you

  • Is there any facility to create responsive html page with tools

    I create many html page is there any tool to create responsive page easilily. Check this sample page of msbte result here i coded manually i not found any buttons or option for it

    Dreamweaver CS6 and CC have a feature called FluidGrid Layouts for creating responsive web pages.
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Dreamweaver CS6 and CC also support jQuery Mobile for building mobile phone apps
    Create & package Mobile app with DW, jQuery Mobile & PhoneGap
    http://www.adobe.com/devnet/dreamweaver/articles/dw-phonegap-mobile-app.html
    Adobe has another product for creating Responsive Layouts in a more visual interface (preferred by designers):
    Adobe Edge Reflow (preview)
    http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
    Or you can jump start your web projects with any of the Responsive Web Design Frameworks below:
    Foundation Zurb
    http://foundation.zurb.com/templates.php
    Skeleton Boilerplate
    http://www.getskeleton.com/
    Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
    http://www.initializr.com/
    DMX Zone's Bootstrap FREE extension for DW
    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
    Project Seven's Page Packs (Commercial Responsive CSS Layouts)
    http://www.projectseven.com/products/templates/index.htm
    Use whichever works best for your particular project.
    Nancy O.

  • RH 11 Imported Screen Layout Not Displaying in Gallery

    Began using a trial of RH11 today and am experimenting with Responsive HTML5. I am trying to understand how to use a newly downloaded/imported screen layout while setting up a new single source Responsive HTML5 layout. I downloaded the screen layout from the Adobe site, which was a single file in a zip file. I unzipped the layout file to the same download folder and imported the extracted file into the Screen Layouts folder in the Project Set-up pod within RH11.  Then while working in the Responsive HTML5 Settings window, clicked Gallery and expected to see the newly imported layout as an option there. The layout does not display. The layout name does display under the Screen Layouts folder folder in Project Set-up though.
    How do I get the layout to display in the Gallery? I am wondering if I extracted the layout file to the wrong location? Does it have to be extracted to a folder within my project files such as the SSL folder or within the folder to which the RH11 trial software was installed? I assumed the Import process in Project Set-up would copy the layout file to wherever it was needed for it to work in Robohelp.
    4/3 addition to original post -- adding a picture for reference regarding where I can't get the new layout to show. WIthout it showing here, how would I go about assigning the layout to my single source layout?
    Message was edited by: KFarrelly

    Thank you William. After following those steps, I was able to apply a newly downloaded .slz to my desired Responsive HTML5 single source layout.
    While I am still not successful in getting the new screen layout to show in the gallery (in window accessed from B below), I was able to see the new screen layout in the Select drop-down list of the Responsive HTML Settings window -- thus mission acomplished! I made my selection from that list to get the desired, new screen layout applied to my project. Thanks so much!

  • Has anyone managed to embed flash content within there responsive HTML5 website?

    Has anyone managed to embed flash content within there responsive HTML5 website? I'm aiming to get my client gallery Flash based but don't want to sacrifice my responsive HTML5 layout to achieve this.
    I feel the Flash gallery would be more secure than my current option,
    Thanks in advance
    Katie xx
    http://www.katiegarcha.com

    It dawned on me what the problem was, in my Actionscript, I am using a XML sheet to call the pictures in the gallery. The XML sheet is located in the same folder as the actionscript, but not in the same folder as the html page, hence the Flash working when it is directly called but not when it is somewhere else. Once this dawned on me, I remembered that I used "short" urls for the images thinking of them all being in the same folder as the actionscript, but not thinking about their relative link from the location of the HTML page. So, I believe that if I change the relative urls to fit the location of the HTML instead of the location of the SWF page, it should work.

  • Does Responsive HTML5 have an option to force the output to be lowercase?

    Using RoboHelp 11.0.3.268, I'm testing the Responsive HTML5 layout as a potential upgrade from our current WebHelp SSL. The one thing I cannot find in configuring the SSL is the option to force the output to lowercase like what is offered in WebHelp and other SSLs. This is a critical project requirement because our team authors on Windows, which is case insensitive, and we publish help output to UNIX web servers, which is case sensitive.
    Thanks,
    Alan

    Also, I should add this. As long as everyone is authoring in RoboHelp, there really shouldn't be issues because RoboHelp "has your back".
    I believe what that option is intended to prevent is a situation where someone may be using perhaps Notepad or maybe even an app such as CoffeeCup HTML Editor to edit the content. And when creating links, if you were to create a topic that was named MyTopic.hTm, if you created the link as mytopic.htm, of course it would break on a UNIX system. And I'm guessing you already know that. So the RoboHelp option just changes all the names and the links to lower case to prevent breakage. But if all are working in RoboHelp and not hand coding links, you are probably totally safe. In fact, I'd be shocked to see that RoboHelp would actually have allowed creating any broken links.
    Cheers... Rick

  • XML to PDF conversion of large catalogue

    I have a bunch of xml content on my website which refer to items being sold. Each item has various spec and description entries. The website is regularly updated but the printed product catalogue is not(it's created separately using adobe indesign)
    So I want to be able to do 2 things:
    1. create parts of the catalogue in pdf format on the fly on the website. (The catalogue layout, page numbers and index page is important to be correct)
    2. create the whole catalogue from my xml data, in PDF format ready to be printed.
    Has anyone done anything similar to this?
    How should I go on about doing this?

    I have a bunch of xml content on my website which refer to items being sold. Each item has various spec and description entries. The website is regularly updated but the printed product catalogue is not(it's created separately using adobe indesign)
    So I want to be able to do 2 things:
    1. create parts of the catalogue in pdf format on the fly on the website. (The catalogue layout, page numbers and index page is important to be correct)
    2. create the whole catalogue from my xml data, in PDF format ready to be printed.
    Has anyone done anything similar to this?
    How should I go on about doing this?

  • Edit Responsive Design template using Adobe Contribute

    Hi,
    I am creating a website which is based on responsive design layout. I am using HTML5 and CSS3 for the framework.
    It has 5 static pages e.g. "About US", "FAQ", "Contact US"
    My customer wants to edit the content of the page using Adobe Contribute. E.g. want to edit the content in about us or Contact Us.
    Now whenever we edit content using Contribute, it sometimes adds styles or <p> tags.
    Please advise if we establish the website server in Contribute, can the text will be editable using Contribute CS5?
    If yes, what will be its pros & cons?
    Thank you
    Monica Mandal

    While designing Responsive layout we have three css frameworks: Skeleton, Bootstrap and Foundation.
    If we are creating CMS Responsive layout (where user can edit using Contribute), is there any way to decide which CSS framework is more preferable for Contribute?
    Use whichever stylesheets best support your project goals.
    See Using Contribute Tutorials
    http://help.adobe.com/en_US/contribute/using/index.html
    Contribute Community Forums
    http://forums.adobe.com/community/contribute
    Nancy O.

  • Responsive HTML5 and accessibility

    Using the WAVE accessiblity evaluation tool, it looks like the Responsive HTML5 layouts are missing alternative text. What files do I need to edit in these layouts to make them meet accessibility standards?

    You can add the alt attibute to images in the .slp pages of the layout (In Project Set-up pod.)

  • Will Adobe Flash be responsive, some day?

    Hello,
    I think Adobe Flash is very useful for playing multimedia content with good-dimension file right now, but I suppose that responsive embed would be included in next version.
    When I play to Flash games, by example, I can't see them with the right zoom, i.e if I try to play from a smartphone or tablet:
    http://www.giochi-gratis.eu/giochi.gratis/110/Shrek.htm
    good for hi-res screen but so bad in other circumstances:
    I would expect that game screen resize in scale for the real browser resolution, as for example modern responsive layout in HTML/CSS would do (think i.e bootstrap or ZURB).
    Hope someone would clarify me this aspect, it is very interesting for web developing and bettere Adobe Flash in my opinion.

    Like the responsive design paradigm in HTML5, content authors needs to build content that considers various form factors when targeting the modern web.  We explored numerous workarounds for legacy content when building Flash Player for mobile devices, but scaling down content intended for a large-screen desktop device simply isn't enough.  We can do some intelligent things with "touch point fudging" to make buttons that are too small work at the smaller scales and stuff, but really, you have to author with smaller form factors in mind if you want a good experience.  Like you've seen with responsive design, layout, positioning and styling can be significantly different for various form factors, and that behavior needs to be defined by the developer.  We can't simply apply a generic set of rules to the diverse body of Flash content on the web.
    The runtime itself actually worked really well on mobile at the end, but it was heavily criticized for not playing content designed in the 90's for desktop platforms in a perfect and seamless way on a form-factor that didn't exist at the time.  Having spent a couple years of my life on those efforts, i'm pretty biased, but Flash on Android (and WebOS, and Blackberry) were all pretty great given the state of the available operating systems and hardware at the time.
    The main justification for dropping Flash Player on Android was that if you have to re-write your content for mobile to get a good experience anyway, you can author and target content to mobile devices using Adobe AIR, and you'll end up with a native app instead of the device's browser.  All of the market research at the time indicated that nobody used the browser on mobile anyway (greatly preferring individual apps), it didn't seem worth it to continue to invest in targeting those platforms with the browser plug-in.
    The convergence of the desktop and tablet form factors is basically a replay of what we were going through with Android back in 2010.  If content isn't authored to be aware of the form factor on which it's displayed, it's not going to be a good experience on all devices.  Flash Player actually returns all of the events and information required to make compelling, responsive content today.  We support multi-touch, screen rotation, high-DPI displays, and content can listen and respond to events when the display orientations and sizes change; however, it's up to the content developer to author content that meets the needs of today's increasingly fragmented world of devices, operating systems and form-factors.

  • Generating either Multiscreen or Responsive HTML5 from command line (RHCL)

    Has anyone had any luck getting either of the HTML5 default layouts to generate using RHCL.exe with RoboHTML 11?  We try to keep the source files checked in, then generate the output at build time. 
    To test, I generated a project based off the "Knowledge Base" template, then updated the the associated screen layouts with the screen profiles.  For Responsive HTML5, that was "Theme1_Standard", and for Multiscreen HTML5, that was "Desktop_Knowledge".  Both of these layouts generate fine through the RoboHTML UI, but when generated from the command line, they fail.  With Responsive HTML5, RHCL does not acknowledge that the layout exists.  For Multiscreen HTML5, RHCL crashes (null reference exception) when processing the project's index.  (Keep in mind that I haven't modified the index from the template at this point).
    I'd be happy with either of these two layouts working with RHCL, as we're still fairly early in the process of creating the online help.  Our only requirement is that it is web-based and cannot use frames (like WebHelp layout does).
    thanks,
    -mike
    Details:
    [For "Responsive HTML5" layout]
    C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML>RHCL.exe c:\src\svn\ba-asp\branches\RB_2.36\src\TestProject\TestProject.xpj -l "Responsive HTML5"
    Adobe (R) RoboHelp Project Command Line Compiler version 11.0.0.179
    Copyright (C) 2006-2007, Adobe Systems Incorporated and its licensors. All rights reserved.
    Error: Layout "Responsive HTML5" does not exist.
    The project contains the following layout(s).
    Adobe AIR
    FlashHelp
    FlashHelp Pro
    Microsoft HTML Help
    Multiscreen HTML5 (Primary Layout)
    Printed Documentation
    Responsive HTML5
    WebHelp
    WebHelp Pro
    XML Output
    eBook
    [For "Multiscreen HTML5" layout"]
    C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML>RHCL.exe c:\src\svn\ba-asp\branches\RB_2.36\src\TestProject\TestProject.xpj -l "Multiscreen HTML"
    Adobe (R) RoboHelp Project Command Line Compiler version 11.0.0.179
    Copyright (C) 2006-2007, Adobe Systems Incorporated and its licensors. All rights reserved.
    Project: c:\src\svn\ba-asp\branches\RB_2.36\src\TestProject\TestProject.xpj
    Layout: Multiscreen HTML5.
    Output: !SSL!\Multiscreen_HTML5\index.htm.
    Scanning project for compilation....
    Scanning finished.
    Warning: No baggage file description.
    Starting compilation...
    Multiscreen HTML5 preprocessor 11.0.1.235
    Clearing output folder...
    Compiling c:\src\svn\ba-asp\branches\RB_2.36\src\TestProject\!SSL!\Multiscreen_HTML5\desktop\index. htm ...
    Preparing to create Multiscreen HTML5 output...
    Preparing files for Multiscreen HTML5 output...
    Copying files...
    Updating files...
    Finished preparing in 1 sec(s)
    Initializing compiler...
    Generating MULTISCREEN  (11.0.1.235)...
    Processing TOC data...
    Updating topics...
    Updating Reference/PhoneNumbers.htm...
    Updating Hardware/WidgetMax_2000.htm...
    Updating Software/WidgetMax_Installation_Issues.htm...
    Updating ProblemsAndSolutions/WidgetMax_Issues.htm...
    Updating First_Topic.htm...
    Updating Project_Background.htm...
    Updating Splash.htm...
    Updating Whats_New.htm...
    Finished updating topics in 0 sec(s) : total 8 topic(s).
    Processing index data...
    Crash occurs at this point.  For what it's worth, this is the faulting DLL's info:
      Fault Module Name:
    HtmSingleSourceMultiScreenHelp.dll
      Fault Module Version:
    11.0.1.235
      Fault Module Timestamp:
    53631bf0

    I just tried and I got the same error as you :-( It seems Adobe didn't implement Responsive HTML5 in the command line. I would qualify this as a bug. Please report it to make Adobe aware of this: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&product=38 Adobe has been fixing many bugs in the past two patches. So perhaps they can fix this in an upcoming patch. And the more people report a problem, the more likely it is to get fixed.
    One way around this issue would be to use a script. Call RoboHelp from the command line to open a script and let the script generate the output. Not the best way to go, but at least you can make it work...
    Kind regards,
    Willam

Maybe you are looking for