Scale website to fit browser width

Hi I'm new to Muse.
There is something i have been trying to do, but can't make it work.
I know about the possibility of full screen and 100% width slideshows. But that is not exactly it.
What I can't figure out is how to make a website that fits and scales with the browser width (scalable). Is that possible in Muse?
Something like this. I have found this as a reference, perhaps it can help explain what I mean.
http://2xelliott.co.uk/

What you are looking for is called 'Responsive' Design. This is not currently an option in Muse however you can easily create tablet and phone versions of your site.

Similar Messages

Resizing images in a div to fit browser width

i have a page with rollovers in a DIV:
http://toddheymandirector.com/REEL/index_newlook.html
i want the the images, "nike the getaway", etc, to resize to fit the browser window width. i tried putting them in a div and adding
row {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
but it didnt work..
ideas?
thanks

You could try something like the below. Basically it will show a maximum of 4 images per row (25%) so:
if your image width is 300px, for the browser to view all 4 at 100% their window needs to be 1200px wide
if their browser window is smaller than 1200px, the images will start to move onto new rows
if the browser window is bigger than 1200px, it will scale the 4 up to fit the width.
You can change the width of the images to match your optimal browser window and/or change the percentages to see the effect it has.
Eg, if you remove the "min-width:25%;" from #gallery ul li it will not scale the images at all. If you change "min-width:25%;" to "width:25%;", it will always show 4 images in a row and scale up or down to fit the window.
Best thing to do is play around until you're happy. Good luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
    background-color:#666666;
    margin:0;
    padding:0;
#container{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
#title{
    width:100%;
    float:left;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:140%;
    line-height:150%;
    margin-bottom:30px;
    text-align:center;
#gallery{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
#gallery ul{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
    list-style-type:none;
#gallery ul li{
    min-width:25%;
    display:block;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
img{
    display:block;
    border:none;
    margin:0;
    padding:0;
    width:100%;
</style>
</head>
<body>
<div id="container">
<div id="title">This is a floating web gallery</div>
<div id="gallery">
<ul>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
</ul>
</div>
</div>
</body>
</html>

Fit browser width

I have a project that I'm looking to have the background (about 300px tall) span the whole width of the browser. The background color is changing for each different page otherwise I would do it in HTML. I have the background larger than the artboard but it still doesn't show up. Is there a way to do this?
Thanks in advance!

There are a few ways to do this that involve writing a little bit of code, but unfortunately I don't think there's any way to do it purely within Catalyst.
One option is to write a bit of code that calls out to JavaScript and upates the HTML page's background whenever your application's state changes. You'd add a currentStateChange listener to your root s:Application tag, then use ExternalInterface to call your JavaScript code.
Another option is to convert the fixed-size application generated by Catalyst into a resizable one, with your fixed-size layout floating in the center and the background filling 100% of the width. You can do that as follows:
Import the project into Flash Builder
In the Main.mxml file, wrap your outermost fx:DesignLayer tag in an s:Group tag
Set verticalCenter="0" on the group to center it
Copy the width and height from the root s:Application tag onto the group
On the application tag, change both width & height to 100%
Setup your background color variations by adding attributes to the application tag: backgroundColor.Page1="#FF0000" will make the background red in the "Page1" state, for example. Be sure you use the exact state name after the dot (copy/paste from the <s:states> section if you want to be sure).
Hope that helps!
- Peter

¿Can I scale to fit my whole website to any browser, screen resolution or both?

Hi everyone!
First, i'm not a programmer, but a graphic designer, a have a huge respect for programmers. I need help with some code and thats why i'm here.
I'm using Adobe Muse to create an website, but my website it's on a huge resolution and i can't change the design to make it more efficient, it has to be like that.
I want to know if there's any way to re-size or fit-to-scale width my whole website to a browser windows size, screen resolution, or both with some code using Dreamweaver.
I'm not talking about responsive, it's justo scale everything automatically when the window browser change or the website where open on another resolution.
Thanks!

Thanks Ben.
I try to put the code on the <head>:
<meta name="viewport" content="initial-scale=1">
but it doesn't work.

Make the whole page fit to browser width

Hey Everyone,
I am making a site for a friend and for the life of me I cannot make the entire site fit to browser width - you can see the homepage here - http://www.dmofilms.com/blacklabelweddingfilmsTEST/
All I want is the entire site to always fit the screen. I have looked up the header/footer tutorial and read another thread on this but still cannot figure it out.
Any suggestions?
Thanks so much!
-Matt

Hey Matt,
I am not sure what you are wanting? Do you want to know how to get the header and footer to fill the width of the browser screen? I am getting horizontal scroll when I veiw your site on my macbook so I am guessing you are making your website quite wide.
I am guessing your header and footer have a really large width because you want that style to span the width of all browser.
Here is what you might want to try. I notice you have a center graphic for your header and footer, then it fades to black with a white line going across. You will need to separate that center graphic from the black banner with the white line. Then save that black banner as a png, make it so it will tile seemlessly horizontally. Then use the box tool and make a rectangle that connects to the ends of the canvas area on Muse in the header and footer. Now you will bring both center graphic for you header and footer and place them over top of the seemless banner. This will allow your header and footer to span width.
Before you do that though you will want to make your canvas area smaller, 960px is still pretty common for websites.
I hope that helps.
PS. Your site looks very well done so far. When you finish I would recommend submitting it to 'site of the day'.

Can't Flex apps scale to fit browser window?

This has been brought up a couple of times, but seems to be a
mystery: How does one scale all content to fit the browser window,
preserving aspect ratio, and centering the content vertically or
horizontally (depending on whether the window aspect ratio is less
than or greater than the content aspect ratio)?
Since Flash is vector-based, I would have thought this would
be straightforward and encouraged!
Some information in an earlier post, plus experimentation on
my part, has yielded a bizarre and inflexible partial solution -
using StageScaleMode, and sizing the app's base container to
exactly 500x375 pixels, I can get content that scales with
the window size and doesn't have mismatched margins (though I
haven't figured out how to center it yet). In addition, there are
ugly scaling artifacts (look at the drop-shadows as you change the
browser window size).
Again, not being a Flash programmer, I baffled that this
isn't better supported, but I have to admit, most of the Flash apps
I've seen in the wild seem to all be fixed at some ridiculous size
like 640x480 or something. Are there some serious bugs here, or am
I missing something? Is there a better approach?
Here's a simple, complete, example (based on an example from
an earlier thread, but simplified a good bit):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx='
http://www.adobe.com/2006/mxml'
pageTitle="Resize Test"
layout="absolute" autoLayout="false"
addedToStage="event.currentTarget.stage.scaleMode =
StageScaleMode.SHOW_ALL"
>
<mx:Style>
VBox {
cornerRadius: 4;
borderStyle: solid; border-color: #000000; borderSize: 1;
horizontalAlign: center; verticalAlign: middle;
dropShadowEnabled: true;
</mx:Style>
<mx:VBox width="500" height="375"
backgroundColor="#808080"
paddingTop="20" paddingBottom="20" paddingLeft="20"
paddingRight="20">
<mx:VBox width="100%" height="100%"
backgroundColor="#808000">
<mx:Label text="This is some text" fontSize="12"
width="128" textAlign="center"/>
<mx:Button label="Button"/>
</mx:VBox>
</mx:VBox>
</mx:Application>

quote:
Originally posted by:
jpwrunyan
Not bitmaps. Externally loaded images that get converted to
bitmaps. What I said is that 90%+ are online catalogues. Logically
it would be safe to assume they display external images of a set
size. Sorry that was unclear. It would interesting to see an
official survey.
Yeah, I was using "bitmap" to mean raster graphics, whether
the actual source be jpg, png or what have you.
quote:
Originally posted by:
jpwrunyan
And good luck getting anyone from Adobe to pay attention to
this forum let alone comment. Better to contact their support if
you're ever really stuck.
Another reason I'm thinking MS is going to win this war - my
colleague is having great luck in the WPF forums.
quote:
Originally posted by:
jpwrunyan
Another reason I thought of why resizing does not result in
rescaling by default:
HTML and JSP applications don't rescale when you change the
browser size. Just go to hotmail or msn and check. They reposition.
Flex applications are intended to behave the same way but with RIA
capabilities. That is probably the more likely explanation than
bitmaps merely not scaling well. Anyway, this behaviour was a
thought-out decision and I happen to agree with it. By the way,
older Flash applications
do rescale to fit the window by default.
Exactly! That's the big problem, in my view, with the
HTML/JPG based web, and is what a vector-based solution
(discounting raster graphics) should solve.
Firefox, and now IE7, have features to allow you to scale web
pages to overcome, in a stop-gap way, this problem. IE even scales
images and Flash apps, though some Flash suffers problems when
scaled. Firefox does not (yet?) scale images or Flash along with
the other content. Flash-based Elmo games at sesamestree.org, at
640x480, look pretty stupid on my 42" 1920x1080 LCD (played by my
3-year old, not me!), but at least I can now (try) to scale them up
with IE7 for him.
I do not believe this was a thought-out decision, it's just
inertia from the bad old ways of doing things. There should be a
working option to easily scale content to the browser window, and
if Flex doesn't provide one, Microsoft certainly is going to (with
WPF/E) as they have with WPF. I'm not a big MS fan, but I think
they get the way things are going with the proliferation in the
range of screen resolutions and sizes that web content is being
displayed on.
That said, I realize there is more to dealing with different
screen sizes than just scaling - you may have to change the amount
of content on the screen, dependent on what the subject is.
quote:
Originally posted by:
jpwrunyan
Now if you want the Flash Player to be able to import huge
.jpg files with 1000px+ resolution and selectively only load enough
information to make a smaller size bitmap image so you can rescale
with impunity, more power to you. Sounds great. I would love this.
But it still doesn't address what should happen when the image goes
beyond the original size. I know you're only using vector graphics
so it's not an issue for you.
Yep, raster graphics are troublesome. Worst case, a beautiful
picture frame grows to surround the image as one zooms beyond its
original size (insert smiley icon of choice here)
quote:
Originally posted by:
jpwrunyan
Finally to get back on the main topic:
if SWFLoader isn't working well, you could programatically do
the same thing. Have a sub-contaier inside the application
container which adjusts its scale accordingly to the size of the
parent application container. I have done this myself with the
Image class for zooming in and out from images (ironically 1000px+
images which were displayed at much smaller sizes).
<Application resize="adjustSize()"
creationComplete="adjustSize()" paddingLeft="0" paddingRight="0"
paddingTop="0" paddingBottom="0">
<Script>
private function adjustSize():void {
var newScaleX = this.width/content.width
var newScaleY = this.height/content.height
content.scaleX = newScaleX;
content.scaleY = newScaleY;
</Script>
<Box id="content" borderStyle="none" width=400 height=300
/> 
</Application>
Something along the lines of the above should definitely
work. I am just basing it off my own previous code. You may have to
be careful of borders and padding if you decide to add them.
Whether it works better than the other suggestions you'll have to
decide.
Thanks for the code, and I'll try it. I'm new to Flex, and so
I'm still struggling with some things (such as when objects are
available for manipulation).

Getting an image to fit across width of browser

Hi
Im trying to get an image to fit across width of browser - I thought i could do it as you would a shape ie size image until red line appears both sides so it will fill automactially as same as a shape. However when I do this it just isnt working - it doesnt stretch across width of browser.
I do realise that I can use BROWSER FILL - however as i already have an image for footer i've used this function which works well. Ive also tried combining the image and my footer as one large image using browser fill - however this doesnt work as when the image is scaled up on a large monitor it puts everything out, as it is just treating it as one large background image.
So my question is - is there anyway I can get an image thats placed to fill browser width without using browser fill?
Many thanks in advance
Paul

Hi,
It works, but when I try this, my image is cut in the length (cutting is different, it depends on witch screen you look).
He don't scroll in image.
Specifications image
Fill (image): filling
Site properties:
Scrollbars browser: always (vertical, horizontal)
Anybody an idea?
Thanks!

How to i fit a box to browser width?

how do i make a text box fit the browser width?
how to i fit a box to browser width?

Hello,
Are you talking about a rectangle. You can do it by using "100% width" button provided in muse.
select the rectangle and click on 100% button this will fit the rectangle to the browser width.
Please let me know if you are taking about something else.
Regards
Vivek

How do I set elements so they adjust according to browser width

Hi Everyone
I'm tryingto to make images/graphic elements on my website adjust to the browser width and always be centralised like this website http://pixelblue.ca
Anyone know how to do this?
Thanks
Chris

That is correct. Currently Muse allows you to create 100% browser width items with Rectangles & Text Frames.
Muse Can :
- have 100% browser width colored strip (using Rectangle)
- have 100% browser width text (using Text Frame)
- have 100% browser width image (using Rectangle & setting fill to image and setting fitting to Scale to Fill)
NOTE : the key to this is to Snap it to the Browser Edge.
select your Rectangle or Text Frame
click the left edge or your Rectangle or Text Frame
drag it out to the edge of your Browser Fill area on your design surface
make sure you see the red line at the edge of your Browser Fill area to indicate you've snapped it to the edge
do this for the right edge of your Rectangle or Text Frame
you need to do this with both your left & right edge to make it 100% browser width
Once you've done the above - preview your page.
Hope this helps.

What's the point of browser width when elements will still show up outside of it in a browser window?

I'm working on my first website and I'm so incredibly frustrated with browser width parameters.
Don't judge it yet, but notice that some of the elements will gladly go outside of the browser width... (such as the rock on the right under "portfolio")
http://timdodddummytest.businesscatalyst.com/index.html#top
So I'm struggling with the concept of browser width if things can just go beyond it. How do I hide it behind the browser width so to speak?
Also, what if I wanted this whole site to just be the width of the screen so it looks great on a full screen 27" or something and not just 960 pixels wide? I do have it set for HiDpi but it still only takes up the center third of a larger monitor...
Any help would be great! Thanks!

Regarding the rock on the right, you could add a black frame above the rock to act as a mask.
Regarding full width, you can have your images "scale to fill" under the fitting options when importing an image in a frame.
The only problem with that is the image will increase in size based on the browser width, and based on your design I don't think you want your images scaling up to much based on the parallax scroll layering you have happening. This is where testing is involved to see what it would look like scaled up and down. (see attached link)
Not sure if I would design a site based on a specific screen size, it's a bit safer to go with a smaller width to accommodate multiple screen sizes.
The link below is a way to see how your site will be viewed on multiple screen resolutions.
Screenfly / Test Your Website at Different Screen Resolutions
Hope this helps... Nice site by the way...

Image won't adjust to browser width

Hi,
I have placed an image in the footer of my master page. In design view it spans from left to right of the browser, but in preview it no longer fills the browser. What can I do to make sure it does?
- When placing the image I made sure it hit the red lines of both left and right browser edges.
- I made sure "footer item" was selected (this doesn't seem to make a difference either way)
- I have tried both "fill to frame" and "fit to frame" options
Here is what it looks like in design view:
And here is how it turns out in preview:

Hi
Have you placed the image and stretched it for 100% width or you have used rectangle fill with 100% browser width ?
Can you please try with a rectangle fill with 100% width ?
Also does it works when you select scale to fill ?
If still same, please select the footer item with fill options open and upload a screenshot.
Thanks,
Sanjit

Muse 7.0 plus Chrome: browser does not show images full browser width

Hi there,
I have a serious problem with the latest Muse version: the images which I use as parallax-masks for the background won't work with Chrome, though Safari and Firefox are not showing any problems. The issue: Chrome does either not scale the images to 100% browser-width or does not show them at all, or even shows the images cut into narrow stripes. This problem did not show in the previous version of Muse.
Of course I already restarted application and computer. System: Mac OSX Mavericks.
What to do now? The presentation with the client is very soon and this bug makes me very nervous.
Best,
bartl

The problem bartl encountered and reported was fixed by the 7.1 release (November 21st). The problem you're describing sounds different.
As of yet, I'm unable to reproduce what you're describing. The URL you've provided views the same in all the browsers I've tried, Chrome (32.0.1700.77) and non-Chrome, Mac and Windows.
That said, looking at your master page I don't think you've created what you intended. At present there are two full screen slideshows on your A-master. On contains no images and the other contains a single image. Both are set to have thumbnails and the thumbnails container is off the right side of the page.
If you look at your "Master Slideshow" layer in the Layers panel, you'll see the two slideshows. I think you'll want to delete one of them and, given your design, turn off thumbnails for the remaining one.
Also, if you don't plan to have multiple images in the full screen slideshow, you'd be better off using a background fill image rather than the slideshow widget.
I remain a bit puzzled how/why you're seeing different behavior in your instance of Chrome. Have you cleared your browser cache?
On an unrelated note, if you set the page fill and stroke to none and set the browser fill to the most common color from the garage door image, it will avoid the momentary appearance of a white page on a grey background when your home page first loads. Instead the site visitor would see a blank page that's the most common color from the slideshow image, until that image loads.

Please make it easier to position images in height and have them adapt to browser width!

Maybe I'm missing a method but I have now long enough stumbled on something I would think obvious to exist within the program.
I just want a highres intro image to pop up. i want to position it a bit down from the vertical center, but it should fill out left and right.
1. Tried using slide shows, but Lightbox won't autostart without clicking thumbnails first. Only fullscreen lightbox has this ability for some unexplicable reason. Please make the non fullres lightbox available for immediate popup without having to click thumbnail.
2. Tried using background browser fill. Works to a degree, but I can't control the image's vertical position.
3. Tried using a 100 % width box and fill it with my highres image. But this wont work for this utterly strange reason:
If I use a 960 px page width as my template, create a box 100% width, I try filling it with my image and tell it to scale to fill. But here's the bummer: If I resize my browser window to accomodate a 2560 px wide screen - my highres image was shredded when I assigned it to fill the 960 px wide box. It's looking a disaster at 2560 resolution. Please allow the image fill to retain it's original size and be able to rescale to smaller sizes instead.
Because downward scaling doesn't seem to work in fills.
So to boil it down: I want to be able to make a box and set it to 100 % browser width in the entry box, not having to graphically drag it out to whatever page width I'm currently using in Muse. I should be able to fill it with an image of any size, without Muse making any decision and downsampling my image, making it unusable for 100 % width display on high resolutions.
Please consider this!
T

>@Ian Lyons: I can't drag the panels but the scroll-wheel on my mouse works fine...far better than it did in LR1.
Agree--when LR is on the main display, but the scroll wheel does NOT work for scrolling the panels when LR is on the 2nd display. I don't know if this is intentional or an oversight or just a situation I experience, but I have experienced it with all versions of LR and in both XP and Vista.
Note that the scrolling of the side panels isn't the only thing that doesn't work properly with the scroll wheel when LR is on the 2nd display--the thumbnail panel doesn't scroll when on the 2nd display, either. However, using the scroll wheel to adjust brush sizes works fine on either display as does scrolling the thumbnails in the Grid view.

Can the 100% browser width function be used in non-master pages?

Can the 100% browser width function be used in non-master pages? I watched the video about pulling it to the red edges, and did that on some of my parent pages, but when I preview the page in browser, it doesn't work. I can still see my browser edges.
The idea for the website I am designing is to have different full browser width images for different pages, and I'm looking for a way to do that. I would create a different master for each page, but there are more than 20 pages...too many master pages! Thanks!

Hi Lindsey,
The 100% width feature works with rectangles and text frames on both master pages as well as regular pages. It doesn't work with images in either case. A possible workaround would be to use a rectangle with a background image, depending on the nature of your image.
Regards,
Nathan

Fit Table width/height to Margin

It would be a great handy feature if the table width could be fitted to the margin of the page.
Moreover 'tables' need some more extra features like : distribute rows/column evenly to fit table width/height. At present this feature extends the table width/height when applied. Once I fix the width and height of the table, distribute rows/column must fit to that width/height only. The table should only extend when I add rows or column.

>I have a 2-page site for a customer and have set it up as
tables (from
> Photoshop CS to Dreamweaver MX).
Bad start. Read this for a better approach -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Then read this -
http://apptools.com/examples/pagelayout101.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Jonclyde" <[email protected]> wrote in
message
news:gfenmb$dek$[email protected]..
>I have a 2-page site for a customer and have set it up as
tables (from
> Photoshop CS to Dreamweaver MX). The first page opens
fine with the table
> occupying 100% up and down as required, but clicking a
link to the second
> page
> causes the table to shrink in size, even though (as far
as I can tell)
> both
> pages are virtually identical when it comes to layout. I
did one page,
> then
> copied it to make the second page. Check it out for
yourself here:
> www.jonathanstewart.com/chc/index.html. I can get the
second page
> (Services) to
> open properly only if I set the target to _blank. Check
the far right and
> bottom of screen on both pages. The bar at the bottom
should rest on the
> bottom
> of the browser window whatever the window's size, and
the bar at the top
> should
> extend "off the page" at both left and right. Any ideas?
>

Scale website to fit browser width

Similar Messages

Maybe you are looking for