Photogallery for responsive website

This is a question I'm starting to hear more often from my clients: "Why does the photogallery not look right on my smartphone?"
I know that the module uses tables and the basic CSS is not set up for responsive layouts. However, when I opened the modulestylesheets.css file in Dreamweaver CC, there were only two items in the photogallery section of the CSS. I cannot see how to modify the photogallery td's in the css to allow them to function properly in my responsive template.
Any pointers would be greatly appreciated!
Also, if Adobe could look into this, it seems appropriate given the direction web is headed! It would be great if all modules were designed to function appropriately within a responsive template.
Thanks in advance!

Hi there,
Table elements are table elements, you can convert them to block level elements that can be responsive.
Responsive tables in BC
Further to this BC.Next and liquid you can run the module as a collection and completely build a gallery exactly how you want.

Similar Messages

  • What is the best approch creating a scalable animation for responsive website?

    I plan making an animated site in a responsive design approch. What is the best practice to do this? Would it be possible to do all animations and complete one size in Edge Animate and then use Adobe reflow to make the rest as planned? How would you do it?

    Funny you should mention this - Sarah just posted something on her personal blog about how to use Reflow and Animate together.
    http://sarahjustine.com/2013/04/03/create-responsively-with-animate-and-reflow/
    Hope that helps!
    -Elaine

  • "Use presets for responsive layout" not working in Chrome

    I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.
    The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.
    It is all working fine, but:
    I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.
    Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"
    With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".
    It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..
    The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.
    What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?
    I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.
    If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

    Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.
    A little further along I see background-size: 48px; .  This is correct.
    So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.
    I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?
    I have reported this bug to Adobe.
    Please see the attachment. You can see where all the settings are made and where I am getting a problem.

  • Is there a field for the website address when creating a contact?

    is there a field for a website address when creating a contact?

    I ended up getting a new phone, straight through Apple.  I called their technical support and went through all he basics again and they decided to replace it.  Was a pretty quick process - after defaulting and resetting the whole phone (about 2 hours),  I called them back to inform that there was no change, so they set up the order.
    I had to give my CC# so they could hold a charge on it (in case I didn't send my old phone bach, which they sent me a pre-posted package to send it in anyway).  Had a brand new iPhone 4S in my hands in 4 days, which was pretty decent.  I had uploaded everything previously to iCloud, so setting up the new phone was a snap.
    Only thing I really didn't like was they charged me almost 30 bucks for shipping or processing, or something.  Not so sure that should have been my responsibility after spending so much on a brand new product, only to have to have it warrantied after, like, a month.

  • What do I need to learn to make a responsive website?

    Hiya
    Haven't checked in here for a few years.
    15 years ago or thereabouts, I learned HTML4  (from Castro's book) and hand-coded a website. I managed to create one CSS page.   Whoopee!
    Then I got DW4, and later an update. and that was SWELL.  And there's my level.  I'm not cutting edge, am I?
    These days I maintain a site for some friends, and they'd like to upgrade it.  Half an hour on Google learns me the term "responsive."  Looks like y'gotta be good w/CSS, and be doing HTML5.
    First question, is there a DW update, or any other WYSIWYG program that will convert an existing site into Responsive, or build one more-or-less the way DW does the HTML4 ones?
    Second question, if there isn't, what's the list of things I'd have to learn to reboot myself?  And any suggestion as to where/how?  Remembering what my level is....?
    Thanks
    denno

    Responsive Web Design (RWD) has some limitations.  Honestly, some web designers just can't do it because they're not willing to abandon old-school tables and/or compromise on their design ideas.  But if you approach this with an open mind and don't try to build anything too fancy or restrictive, RWD can be very rewarding. 
    Always consider your mobile users first.  They interact with their devices differently than desktop users.  For example, mobile users need less content and bigger, finger-friendly menus, buttons and forms.  There are volumes written about this subject on the web.  Spend some time learning the theory as well as the code before you dive in to your first RWD project.
    Start with these links:
    Responsive Web Design
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    DW CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
    Good luck!
    Nancy O.

  • Is it possible to create Responsive websites with Adobe Muse?

    Hello,
    The question is in the Subject line.
    I would like to create Responsive websites in Muse so that they can flow to adjust to desktop > tablet > smartphone screen sizes, and I wondered if this is possible with Muse.
    Thanks,
    Chris.

    A little rant on this topic:
    "Responsive" works only so well. Very often a "responsive" web site can look like it wasn't designed for any screen at all; instead it ends up looking like a Microsoft Excel spreadsheet with a little better color and graphics. Nothing is ever really proper or composed. It's a page being Jack of trades and King of none. I look at a lot of those pages and just go "blah."
    We have very extreme differences in display resolution from one device to the next, both in terms of absolute pixel count and pixel density. There really is no way to accommodate them all properly unless you specifically design pages for each resolution -all with assets sized specifically for each resolution setting. Some people are still using old, outdated displays like 320x480 on an old iPhone or 1024x 768 on an old CRT monitor hooked up to some old WinXP system on its last legs. 1280x720 is common on a lot of older Android phones and old HDTV sets. 1920x1080 has become very common for new desktop computer monitors and laptops. 2560x1440 had been the highest pixel count one could see in a monitor, but that is now getting surpassed by 4K and even 5K displays. One of Dell's 15" notebooks has a 3200x1800 display. 4K UHDTV sets with 3840x2160 resolution are hitting affordable price levels now; most have built in web browsers. The newest 27" iMac has a 5120x2880 display. Add in the additional factor many desktop and notebook users don't have their web browsers filling the entire screen. I just don't see how someone can create a "one size fits all" approach to cover all of those different screen settings.
    Here's one thing I would like to see in the future: the computer industry settling on some screen resolution settings, screen orientation and aspect ratio. We wouldn't need "responsive" so much if various device makers would stick with some well established standards. We don't need oddball settings, like what Apple put out in its last two iPhone generations (640x1136, 750x1334 and 1242x2208). It's bad enough mobile devices capture a lot of vertical video. Too bad they're not designed to encourage users to hold the devices horizontally.
    I wouldn't mind seeing Muse add new features to help designs be more responsive. But I'd like to see more done in the way of improving SVG support (vector graphics scale up and down to any resolution). I'd also like to see Muse support HiDPI in more than just the 2x setting.

  • New to CS6 Dreamweaver, creating a "Responsive Website" having trouble getting fluid divs to behave

    Trying to create a "Responsive Website" and I'm having trouble getting my fluid divs that I create to "break" their link from the "Boilerplate" .
    I'm using a "Fluid Grid layout Div" to create a section that has a transparent background of rgba(0,0,0,0.3) and that's perfect, then I add two more "Fluid Grid layout Div's" inside the transparent one to create a 2-column part in the section and that's where the trouble is.
    None of the "formatting" I've set for the text in my ID's or Classes are being used - just reverts to what's in the "Boilerplate" i.e. "p,h2,h3" and I can't get it to "break" it's link the "Boilerplate" so I can apply my formatting.
    I have been able to select my formatting at times but it is ignored and uses what's in the "Boilerplate".
    Kept trying different ways to get it to work and now I've so many of both the ID's and Class's that their not all showing up as an option to be able select them.
    I'm missing something basic and after two days it still escapes me.
    Please somebody, tell me what I'm missing.
    Frustrated

    FluidGrid Layouts are not easy to learn.  You need a good grasp of fundamental RWD concepts including CSS Media Queries.  Keep your layout simple and be patient.  The first time I used FGLayouts, I had to start over 9 times before I got acceptable results.
    Responsive Web Design
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Best advice for beginners:
    Build Mobile Layout first.  Everything else is based on this primary layout.  Then build Tablet layout and finally Desktop.  Don't worry about content.  Just build the layout & save often during development.
    DO NOT TAMPER with the boilerplate.css or FGLayout.css code.  Even experts can break the layout in a hurry.  Use a separate external style sheet for content and typography styles.
    If you're using CS6 ver 12.0, you cannot nest divs inside other divs.  Everything must be inside the .gridContainer like this:
    <body>
        <div class="gridContainer">
              <div> </div>
              <div> </div>
              <div> </div>
        </div>
    </body>
    If you care to post a link to your online test page, we can take a look and possibly offer more suggestions.
    Nancy O.

  • Responsive Website Printing Issue

    I have created a Responsive Website in Dreamweaver CC.  I am trying to print a copy of the Desktop Version for my client.  When I print (I used 3 different printers and they all were the same), it comes out "mixed up" for lack of better terms.  It doesn't not look like the Website at all.  Any suggestions?

    Use your Print Screen key instead of printing from browser.  Ctrl+V into your favorite image editor.  From there you can print the screenshot in landscape mode.
    Nancy O.

  • Can you build Flash elements to work with responsive websites?

    Hey everybody,
    Just a quick question ...
    The company I work for is now starting to develop responsive websites and portals. We have several websites that utilize Flash and will continue to do so in the future.
    My concern is that the Flash components will not resize when the screen size shifts. Is this correct? Is there a way I can develop these portals/sites/components to behave responsively as the screen sizes change?
    Any and all advice is very welcome!!! Thank you in advance!!!

    If interested on moving to HTML5 from Flash,check out  this http://www.adobe.com/products/flash/flash-to-html5.html

  • Responsive website banner

    Hi
    I am being told by a website designer that it is not possible to build a responsive website with banners which can be conditioned with different text heading positioning on these banners and same for the buttons. For example in ipad and mobile the designer mentioned that they are unable to control the text positioning. This causes the text on the banner to be situated in areas which are disturbing the picture (e.g. Text on a persons face etc) and the positioning of the banner buttons to be placed in areas which do not make sense.
    Is this correct? I have seen many other websites such as ubank.com.au, commbank.com.au which have a responsive website for ipad and mobile which are able to customize the banners, banner headings and buttons.
    They have said that my only option is to remove the buttons completely (desktop/ipad/mobile) and then they can control the text by hard coding this to the banner.
    Any information would be great. thanks
    Vincent

    It's possible if you know what you're doing.  Example with different banners for desktop, tablet and mobile devices inside CSS media queries.  Resize viewport to see it work.  View source to see the code.
    Alt-Web :: Fluid Grid Test
    EDIT: I think it's best to keep text and navigation separate from re-scaling images both for design and usability reasons.
    Nancy O.

  • Will Muse Create an Update for Responsive Design

    Will muse create an update for responsive design? I understand if you put a shape to the edge of the website that the website will be responsive that way, but I want the text, header, and logo to change as well. Or how about an export to reflow?

    I agree somewhat. I love the usablilty of reflow, so I think that if they implemented those tools into muse it would be perfect. It is a complete web design application, so why not have the responsive design into it?

  • Full responsive websites

    Does Adobe BC have any plans in the near future to include pre-coded responsive website templates built for the BC platform? If so, would that include a fully functioning online shop in responsive format...
    Can anyone shed some insight into how they are dealing with responsive websites integrated with BC modules like webapps, BC's online shop framework etc... any major pitfalls to look out for?

    It seems unlikely that will happen in the short term.  The current templates took a long time and some areas of those are haphazardly integrated.
    Responsive web requires planning on an individual site basis so it's hard to throw anything specific out there.  The majority of BC is fine, especially web apps being you're building them from scratch.
    eCommerce can be tricky in areas (shopping cart, order history, invoices etc.) just because they often need a bit of rebuilding as they're tables and tend to stretch the mobile boundaries.
    Some areas you need to make sure you get rid of the tables entirely by telling BC to use LI's in the module tag.
    Overall you just need to plan it out, perhaps build a couple of frameworks you can start from so the basics are there when you start a site.
    Scott Reynolds just did a responsive presentation on the BC Sandpile: http://www.bcsandpile.com/business-catalyst/resources.htm (Under previous sandpiles).
    Here is a site we finished early this month that is responsive and eCommerce: http://bit.ly/ZKKr1u

  • How do I create an ANIMATED GIF for my Website Logo?

    Hi,
    I would like to make a turning logo for my website. The problem is that I don't know which software to use and how.
    Is there an Adobe program which is easy for creating an Animated GIF or equivalent moving logo...
    You can see my static logo here: Online Radio
    Thank you,
    Freeway

    Hey Iggy,
    These might help:
    Muse
    http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-muse-what-is-business-catalyst
    http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-muse-creating-and-publishing-sites
    -Dave

  • How do I create an 'upload facility" for my website using Muse.

    How do I create an 'upload facility" for my website using Muse.  We are a print company and is how we receive most of our work.
    Iain

    Hey Iggy,
    These might help:
    Muse
    http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-muse-what-is-business-catalyst
    http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-muse-creating-and-publishing-sites
    -Dave

  • When i search for a website it takes me to another website.  I will click on the link and it takes me to one ive never wanted?  please help very frustrating!  I am not very computer savy, is it my settings or something?  Jen

    When I search for a website it itakes me to another website.  I will click on a link and it takes me to something completely different or yellow pages etc. Please help I am very frustrated and not very computer savy!  Thanks!  Jen

    Hi Jeff I have uninstalled Muse from my applications and have tried to download the new version but it displays a message 'file not found'. I have included a screenshot.

Maybe you are looking for