Centering Marquee for Responsive Design

My website is displaying my current marquee... http://www.roemtech.com/new/rotator.html
I built this rotator for my imac with a width of 100% (1900px max) and a set 500px height.  If you open the page in a browser for the imac the background and image display correctly and the background responds correctly for smaller sized images.  However on smaller screens the rotating images do not hit the center of the background. 
How can I set the pictures to maintain thier aspect ratio while still hitting the center of the screen for multiple screen sizes?

Justin: What I meant was I would like the students to design a site that will be responsive to whatever device the visitor is using. It appears Muse has you create three versions (computer, tablet, phone) and then the Business Catalyst host has scripting to know which of the three to send out to the visitor. But, is Muse able to create the scripts required to make this happen without relying on whether or not the server has specific JavaScripts? Sorry, I'm a bit over my head with this. Thank you in advance for your continued help!

Similar Messages

  • 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?

  • Insert images and text in header for responsive design cc

    I am having a issue with inserting a logo, company name and Facebook graphic into my header.
    I started setup of a responsive design and added a responsive header along with other areas below.
    I want the Logo to stay on the left, the company name to the right of the logo and the Facebook graphic on the right side of the header.
    I keep making a mess and can't get anything to line up correctly.
    I am using Adobe Dreamweaver CC and trying to control with CSS.
    I am just starting to learn the new CSS Designer in CC. I liked the old CSS console better.

    Basically, you need to float all 3 elements left and give them a width of 33.33% (3-across).
    header #logo,
    header h1,
    header #fb {
         float:left;
         width: 33.33%;
    HTML:
    <div class="gridContainer fluid">
         <header>
              <div id="logo">Your logo here</div>
              <h1>Your Site Name</h1>
              <div id="fb">Facebook here</div>
         </header>
    Nancy O.

  • CP8 system variables for responsive design

    Does Captivate 8 have a system variable that returns the responsive view currently shown on a learner's device? For example, is it possible to create an advanced action that would show an object only on a mobile device?

    I don't know of any but i have done some of this with embedded html using media queries in the CSS (to show things only in the mobile view) and it works fine

  • Need to capture multiple image paths for responsive design when only one will be displayed at a time

    I'm new to CQ and am having enough trouble following the documentation on image components as it is (why is there no master reference for all this?). I have a requirement where we need to capture three versions of an image and put the URLs into three attributes of a tag. The appropriately sized image will be selected via JavaScript based on the browser/device capabilities. I need to know how to capture those images when seemingly only one at a time can be dropped onto the page. Or perhaps there is a more CQ solution to this.

    Hi,
    You need to customize image component. I mean selected image is a asset in the repository and each asset by default has 3 rendtion generated when the image is uploaded in the dam.
    For example when you upload image.jpg file into the DAM, standard workflow is launched and after a while inside the repository (see paths) are created following renditions:
    /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.140.100.png
    /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png
    /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.48.48.png
    This process can be customized by changing /etc/workflow/models/dam/update_asset.html workflow and modifing "Thumbnail creation" step by adding in the Process tab -> Arguments field new values for new rendition. So for example if you add there [400,400] new rendition will be created in the path
    /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.400.400.png
    Next step is to customize jsp for image component. Using path to the drag and dropped image from a component attributes you can easily take all renditions iterating on the /content/dam/project/image/yourimage.jpg/jcr:content/renditions node and then set paths to all renditions in the tag attributes. Then like you wrote using js you can select proper rendition.
    I hope that it hepls you.
    Regards,
    Adam

  • Captivate Responsive Design not Working for Moodle

    I was wondering if anyone has published any Responsive Captivate projects to Moodle. I’ve been trying, but I can’t get the responsive project features to work on Moodle. Any thoughts?

    Hi
    There is not a great deal of difference between the iPhone 4  and the iPhone 5, as far as the Safari iOS browser is concerned.
    Are both phones updated to iOS 6 OS?
    AP Elements, are not the best solution for responsive designs, (or any design for that matter) but they should still render. They may make it necessary to scroll the browser in order to view the page.
    I was going to suggest that you also try the BC forum but on checking I see that you have already done so.
    If you have Edge Inspect installed, can I suggest that you take screenshots of what you are seeing on both phones. and post these on this forum and the BC forum, as it may help us if we can see the exact difference between the two phones.
    PZ

  • Responsive Design not rendering for smartphone

    Can anyone take a look and tell me why my code isn't rendering on a smartphone?
    http://donrobertosmicheladamix.businesscatalyst.com/
    I use Protofluid and the css is rendering fine on that ... but not on my actual phone:) I'm driving myself crazy here.
    Thanks!

    Hi
    There is not a great deal of difference between the iPhone 4  and the iPhone 5, as far as the Safari iOS browser is concerned.
    Are both phones updated to iOS 6 OS?
    AP Elements, are not the best solution for responsive designs, (or any design for that matter) but they should still render. They may make it necessary to scroll the browser in order to view the page.
    I was going to suggest that you also try the BC forum but on checking I see that you have already done so.
    If you have Edge Inspect installed, can I suggest that you take screenshots of what you are seeing on both phones. and post these on this forum and the BC forum, as it may help us if we can see the exact difference between the two phones.
    PZ

  • Responsive design mode is showing part of pages and is not showing any optomized pages even in safe mode.

    I need to check multiple websites everyday for responsive design. When I open Responsive design mode I am getting full pages on every site, even ones I know are mobile opt. No matter how I scale it everything remains exactly as it is. I have to scale it to the far right to get the whole page. Basically the pages are always in full screen and I'm getting a window that only allows me to see part of a page. It is very frustrating.
    Win xp
    firefox V28.0
    I am not a coder so please keep solutions simple.

    From your screenshot, it seems to be working, as that grey bar has appeared at the top (with a link to the mobile version of the site). This only appears when the viewport width is 800px or less. This support website doesn't shrink dynamically (as the viewport gets smaller), but remembers whether your machine has a small screen or not (probably by storing a cookie which is changed when you click the link in the grey bar).
    If you are having trouble with other sites, have you tried refreshing the page after resizing? When I have created responsive websites I often have to use JavaScript for a few features, and it simply isn't worth the processing power to make the code run every time the window size changes. Other than that I can't see what would be causing the problem (unless there is other important information you may have missed out)

  • Responsive Design

    Six months ago I purchased Dreamweaver CS6 to have my site more interactive, i'm new to Web Development. I currently ran into a slight IE 7 & 8 comp ability issue with DWCS6 and CSS3.
    My computer system is Windows 7 with IE9, so when testing my new site all went well, until I uploaded and learned about Internet Explorer Developer Tools, which has cross browser mode to test IE 7 & 8 versions.
    Unfortunately my site shows phone view first, I’m using Dreamweaver Fluid Grid Responsive Design System, which gives 3-layouts, phone-tablet-desktop.
    For the past month my reasearch is circling to no avail, I have tried many methods on the net , but none seems to be working.
    I have learned that “html5shiv.googlecode.com/svn/trunk/html5.js" and "respond.min.js”
    are not working properly with my site ( in IE 7 & 8).
    May I humbly request your assistance with resolution to these issues?
    www.angelsbyangels.com
    Thank You,
    mlfa

    It's really a waste of time to make a site responsive for old browsers.
    The hacks required are not simple and tend to add to an already bloated
    approach by Adobe. Concentrate on modern browsers and, of course, mobile
    devices.
    Unfortunately, there is little consensus on best practices for
    responsive design - primarily because the methods are evolving
    constantly. It is very easy to happen upon an out of date article, which
    is probably how Adobe developed their Fluid Grid monstrosity
    But if you have a problem with a particular page, you really need to
    post a link to a live page or it will be nearly impossible for anyone to
    help you.
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Tools
    Since 1998

  • Why can I export (and import)the different sizes that I put in the "Responsive Design View"?

    Hello
    I have troubles when try to import or export the different sizes of the Responsive Design View, I manage at least 13, and it's a little preposterous to add one by one. There are a method that export/import them?
    Thanks

    There is a way to store custom settings for responsive design.
    You can create custom settings in the responsive design mode window.
    You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
    This will add the preset to the <b>devtools.responsiveUI.presets</b> pref that you can inspect on the <b>about:config</b> page.
    Those settings are stored in JSON format.
    <pre><nowiki>[{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x600","name":"8x6","width":800,"height":600},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]</nowiki></pre>
    See this thread for some JavaScript code to add extra sizes:
    *[[/questions/957590]]
    You can paste the existing JSON value of the devtools.responsiveUI.presets pref in the prompt and click OK.
    Extra values can be added by typing its dimensions (<width>x<height> <name>).
    You can paste the resulting JSON value back to the devtools.responsiveUI.presets pref or save it.

  • Captivate 8 Font used for respoinsive design

    Hi
    Can anyone help me out to check if we can use fonts of our choice for the responsive design.
    when i use Tahoma or Verdana font or any other different font, it displays the Times font in output when viewed on Iphone. and arial or similar font on android devices.
    any suggestions about the use of fonts in captivate 8
    Thanks
    Mayuresh

    Thanks Shriyansh
    The font used in the captivate file was showing as Arial but in output on Iphone it was showing as Times.
    I changed the font to some other font and again changed it to Arial and it is working correct now.
    it show the arial font in Iphone now. thanks the problem is solved.
    i have another query, can we use some different font for responsive design which not a web font.
    in our custom HTML projects we embed fonts in the HTML wrapper and use them in the project to display the used fonts on any device.
    is it possible in Captivate 8 for Responsive projects.

  • When will Adobe Muse will integrate responsive design (like bootstrap twitter). Will you work on this or no ?

    When will Adobe Muse will integrate responsive design (like bootstrap twitter). Will you work on this or no ?

    Hi Gaurav,
    Yes, thank you. However I was more specifically referring to this:
    "Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration."
    You can find that on this Official Google Webmaster Central Blog.
    I would think that Adobe might want to open their ears to Google's recommended configuration. No? Isn't it about time that Adobe starts listening to their customer base (and Google)? We've been tirelessly asking for responsive design for years.
    Regarding:  "Adobe Muse works perfectly when it comes to Separate URLs". True ONLY if you can get it to (re)direct correctly. Since they introduced multi device layouts I (and others) have never been able to get the correct version to display on any of my tablets (Archos & Samung Tab 2, 3, 4). The phone site would always show up on the tablet even though the hierarchy for the tablet is: Tablet/Desktop/Phone. Adobe has acknowledged this issue exists and has done nothing to solve it. How again does that help me?

  • How do I make my text centered when making a site have responsive design?

    My text can be responsive with screen size in the font automatically adjusting its size when you make the window different sizes and everythng flows nicely. The only problem is that no matter what size the window is, the window only shows a corner of the website, having part of the website cut off, making the viewer scroll right horizontally to read the rest of the text. I am new to responsive design. (I am a college student that haven't taken web design since last year, just to note).
    I try to change the padding and margin of where I have my text yet nothing changes and I still have the same problem.
    Below is the CSS style for where I have my text located:
    .textboxinfo {
        background-color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        height: 100%;
        width: 100%;
        right: auto;
        margin-left: 260px;
        margin-right:300px;
        float: left;
        padding: 15px;
        color: #333;
        padding-right: 500px;
    Am I looking in the right spot?

    You cant have a box width set to 100% and left and right margins set as well as that makes the box wider than 100% which means it's wider than the browser width;
    What happens when you remove - margin-left: 260px; and margin-right:300px; from the css selector below?
    So you are just left with:
    .textboxinfo {
        background-color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        width: 100%;
        float: left;
        padding: 15px;
        color: #333;

  • Impulse responses for Space Designer

    Hola,
    Anyone know of third party companies making high end impulse responses for Space Designer?
    I am particularly interested in finding an authentic spring reverb for dub style tracks ala Lee 'Scratch' Perry.
    Thanks for any leads.

    don't know if you consider them high end or low end but these ones are free
    http://www.xs4all.nl/~fokkie/IR.htm
    DAVE

  • Best practice for responsive projects

    Does anyone have tips on best practices for responsive project?
    I understand that 3 different layouts can be created. What happens if a learner is not using one of the 3 devices that were set up in a responsive project, and their screen size is different from any of those

    Jay,
    Dr. Pooja Jaisingh offered very valuable tips for good practice in responsive design last week in her webinar. 'Do's and Don'ts of creating Responsive Projects with Captivate 8'. I don't see the recording yet On Demand, but keep an eye on it.
    Did you test a responsive project with F11 (Preview in Browser)? You will be able to change the resolution of the browser window and see that the content, if well designed (you can have absolute positioning, size as well) will move, shrink to adapt. The break points (3 devices) allow you to make more invasive changes at those points: dragging some objects out of the stage in the scratch area because they take up too much space for phones is one example. Or replacing a big screenshot with many details by a zoomed in detail screenshot for the mobile breakpoint. That is my way of explaining, responsive is not just have the three layouts for devices, it is also adapting between those breakpoints.

Maybe you are looking for