Full width responsive layout in Muse

I'm working on a website for a client and they want a site that has full browser width content however I can't seem to get my objects to span the whole browser and resize properly in relation to browser window size. I figured out how to make a rectangle stay put but not the rest of the content. I tried grouping my other objects (text, menus slide show, etc) with the base rectangle but that just threw the rectangle off and it no longer fully spans the browser.
Can Muse even do what I need it to do or am I going to be forced to use a different product???
TIA!

At the top of this page you find tje search command. Search for "responsiv" and you find what you are looking for.

Similar Messages

Centering a full width image in Adobe Muse

Can anyone help. I am trying to centre a full width image in adobe muse but I am getting nowhere! I am trying to keep the center of the image in the middle of the browser no matter what the browser width. I am using the image as a fill in a full width box and have tried centering it using the fill options (top centre) and using the align (central ) tool for the box but neither seem to work. My page can be viewed at
www.helioswebdesign.co.uk
Any help would be much appreciated
Yours
martin

To add images press CTRL+D and then select the image and place it where you want.
To hyperlink it go to the top menu and there should be Hyperlink folowed by a box. Enter your URL to link in there.
You can also use the slideshow widget should you want to make a slideshow.

How do I create a Full Width Photo for a Liquid Layout - CS3

Greetings & Help!
I'm trying to create a full width photo layout without the
photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Greetings & Help!
I'm trying to create a full width photo layout without the
photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

How do I create a web mock-up using Full Width Photo's

Greetings & Help!
I'm trying to create a full width photo layout using
Fireworks CS3 & Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Hi Pixlor -
I'll do my best to answer your questions - within my ability
- which isn't much.
As far as "Tile" the photo - I've checked out the responces
I've received from other's on this post - and other posts - and on
each page for the "masthead" I just want one photo to be the same
size of the page width wize - and the height of the photo should
not be tall from the top of the masthead to the bottom of the
masthead. As far as what I mean by "not being Tall" - see next
comment...
I'm just attempting to duplicate exactly (or very close to
it) the same appearence and dimensions - "Width = side-to-side,
Tall = Height - as the websites I mentioned in my first post here.
Also if you check out Joey's website (who responded to my
post as well) basicly he has created the same thing that I'm
shooting for except he is using graphics. I have to use photos in
my masthead which will be of kitchen cabinetry or construction
photo's and must highlight every detail down to the shine of the
kitchen cabinets knobs - or close to it.
Due to this I can not have the photos of the masthead "tile"
from "width-to-width or top-to-bottom because the deatils in the
photo can not repeat or multiply to completely fill the masthead
head. Otherwize if I choose a photo of kitchen cabinetry which
highlights a kitchen sink - and if I tile this photo - from what
I'm learning from everyones responce thus far - I'll end up with
several of the same kitchen sinks and cabinets in the same photo.
I must stress I could be wrong in what I described directly
above due to my lack of tech knowledge! If this post was about a
2x4 or 2x6 or Green Building or what have you, It would be heck of
alot easier for me to completely understand what you pro's are
trying to help me with - which I completely appreaciate. Expecially
someone like you who owns a monitor the size of one of my work
trucks!
Which brings me to your next question...
Liquid layout -
Yes I am trying to end up with a liquid layout for my website
using Dreamweaver CS3. Hopefully using one of the pre-built liquid
layouts in Dreamweaver and modify it within my ability.
The main reason why I would like to create a liquid layout is
because most others construction firms in my industry - and in my
target market - have websites that completely consume a viewers
monitor - viewport - screen real estate - (i'm trying to learn your
tech terms) no matter what size viewport a viewer has, or how the
viewer resizes theirs.
I've also heard that a "Min & Max" code can be included
in a liquid layout so that it would limit the "liquidness" of the
layout so "Text Lines" won't stretch too long making it difficult
to read when a viewport size extends - and when the viewport shinks
- all the elements (or Div's) will reflow an maintain order and
visability.
1004 -
The only reason why I mentioned designing the Fireworks CS3
mock-up at a 1004 is because someone else mentioned they design
their mock-ups at a "Canvas Size" of 1004. Then most browsers
automaticly inlclude a scroll bar if the vertical content exceeds
below "The Fold". Thus with the addition of the automatic scroll
bar the page now becomes 1024 - according to this person.
She went on to mention according to "recent studies" - 56% of
viewers have 1024 x 768 and most computer manufacturs shipp them
this way. Then the following stats... 22% at 800 x 600, then 13% at
1280 x 1024, then 3% at 1152 x 864, then 1% at 1580 x 1129. She
also mentions most avearge viewers (every day Dick & Jane, Bob
& Besty) (excluding computer tech folks like yourself) - do not
resize - bother with - or know how to resize their viewport.
My personal note on this is most of my target market -
clients - just turn on their computer and surfs the net from
website to website without changing their viewport and when also
asked they "Feel" that a website looks much better - or more
profeshional - when the content completely fills up an entire
viewport.
"Feel - not - Think" -
Keep in mind I choose the word "Feel" & not "Think". In
my target market - Residential Construction - 95% of home
improvement decisions are made my the Woman of the houshold - not
the Man. That being in mind it is a proven stat (and not a sexest
comment) that women base most of their choices or decsions on how
something makes them "Feel". Where as most men make their choice or
decision on how they "Think".
Also most men attempt to keep their women happy and knowing
that if they don't then they will end up in the doghouse - ( not a
fun place to be trust me on this) and in addition most men do not
have much of a clue when it comes to the interior design layout of
a home, matching of paint colors, appliance choices or what have
you.
Wow that was a major side track I took -
Back to 1004 -
It's not that I'm intend in designing the mock-up in
Fireworks at 1004 - I just want to end up wth a liquid layout so
when my site is viewed by "most people" then my site will
completely consume a viewers viewport - or very close to it.
If I need to design the mock-up less then 1004 - or more then
- and still be able to end up with the same end result in a liquid
form - so be it.
I don't know the best way to proceed -
I'm just attempting to learn from others who respond and for
the most part those who have been kind enough and taken the time to
respond seem to be very knowlegeable about my issue at hand.
You might find this hard to believe but I am learning quite a
bit from all of you and I really do appreaciate it.
Well now that this responce is as long as the novel "War
& Peace" - I'll close here.
Travis

How do I create full width photos for a website with Photoshop - Fireworks - Dreamweaver CS3 ?

Greetings & Help!
I'm trying to create a full width photo layout using Photoshop or Fireworks CS3 and then end with Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at this point I would settle for a static photo with the same size being the same on each page.
Also I would like my site to be a liquid layout so the photo and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match the same width, height and appearence as the websites I mentioned above.
If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks CS3 and after search Adobe and www I came across the mock up should be 1004px which would end up being 1024 with vertical scroll bar and small margins.
I also have Photoshop & Flash CS3 but should mention (if you haven't already guess it by now) I am a rookie when it comes to creating a website.
So if you can offer a solution in "Non-Tech Terms" I would appreciate it.
Thank you in advance for your time.

In the second example, the photo is set to background with a tile. The other parts are over top of the photo and done with layers with a background color setting.

Muse mobile site doesn't display full width

The mobile version of my site doesn't display full width. It doesn't scale to fit the mobile screen as the set up width in Muse.
I found a tip talking about add "viewport" code to muse site. When I insert the code to html window, it give me a box said "unable to generate a thumbnail"
If add the view port code is the solution, how do I add this code to the <head> tag on muse?
If not, what's the solution for this situation?

One problem where this occurs is that there could be some object (s) outside the layout page size.

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

Scalable/full-width slideshows in Muse

I am interested in creating a full-width slideshow in Muse, much like what is being employed on this website http://lafayetteny.com/
Previous threads from last year say it isn't possible - has this changed since?

Hello,
Check these related threads that explain how to create full width slideshows:
http://forums.adobe.com/thread/1213057
http://forums.adobe.com/message/5407836#5407836
http://forums.adobe.com/message/5615685#5615685
Hope this helps.
Cheers
Parikshit

Mobile layout : a stange Issue when making elements full width

I started to play around with the mobile features in adobe muse but I seem to be getting some strange issue.
Not Stretching the elements to full width - all fine
Stretched to full width and I get this added "padding" not sure why
I was trying to re-create this:
http://blogs.adobe.com/muse/2012/12/11/create-super-widgets-in-muse-the-expanding-mobile-m enu/
Thanks
Daz

Hi Daz, This might be a bug in our Preview Mode. Do you see the same behavior on the actual phone? You can publish to a free trial site, by clicking Publish to test it on your phone.
Let me know.
Thanks
Noam

The mobile version of my Muse site doesn't display full width

Can anyone help me figure out how to make the mobile version of my site display full width? I've snapped everything to the full width using the blue lines, but the whole site is left justified. I reviewed the master page and everything seems to be in order.

You most likely have an empty box or text box that is off to the right in your design. Do a select all on your Master Pages and pages to see if you have any elements outside the right side of your design.

Adobe Muse Footer not full width in preview mode?

Hi, I originally had my footer 100% width when previewing in browser and preview mode, and now for some reason it is not 100% width. Not sure what I have done for this to occur and it doesnt make it any easier when in design mode it is 100% width. Any help much appreciated.

Just answered my own question, bounding box was not quite out to full browser width. To ensure it goes out to the full width keep dragging across until the guides turn red. I must of bumped it when I went in the masters page to do something and it was out by just a bees dick! Unreal....2 hrs of my life I wont get back haha :-)
PS...Do I get 10 points for answering my own question? ;-)

Why can't the Accordian widget's drop down box span full width in mobile layout?

I'm trying to create a simple drop down navigation for mobile. When the entire header is clicked, it expands down to reveal a dynamic vertical menu, which will cover the page content below, not push it down.
I've taken an accordian widget and added a vertical navigation widget (to allow dynamic navigation) into the expanded area. When I preview it, the drop down box of the accordian widget doesn't span the full width of the site width (380px). It stops 5-10px short of the right edge, which is a small detail, but it annoys me, and is not how I have it set up in design view. There is no other content on the page, just this element. When I have elements extend off the page area, it somehow affects the amount of space the drop down area stops short from and adds more. Strange again. Kind of stumped as to if/how I can fix this.
Screenshot attached.

The code taht you have shown is not the template, it is a document that has been created from a template and renamed with a dwt extension.
If you load the document into DW then go to menu item Modify->Templates->Detach from Template and save the file, you will have your original template called index.dwt and located in the Templates subdirectory.

How can I create an adaptable full-width site with sliding parallax panel?

Hi guys!
I have to create a web site with a full-width resolution, adaptable with any monitor and resolution using some panels that moves using the parallax scroll-motion with a sliding effects.
For example I nedd a site like "collecdiv.com" that works with the same effects and with an adaptable full-widht size page.
Here's some screen I take of my site with a 22" 1920x1080 resolution and a 15" 1280x1024.
The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
How can i resolve the problem? How can I fix the screen so anyone else can see my site without problem and with all the resolution?
Who can help me? PLEASE
Thanks in advice
Francesco
P.S.: an advise... check the site "www.collecdiv.com" to see what I nedd

I'm adding this screenshot so you can understand the problem... The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
Pleas help me

"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.

Full legend in image slideshow full width

Hi Everyone,
I can't get a legend full width with a background color in the image full width ( Slideshow ) , could you help me please ?
Thanks
Message was edited by: zeek zeek

@iamDK,
Thanks for the response. I am familiar with Pinning and Slideshow Widgets and have been using Muse since it's inception, what I don't understand after watching one of the videos in which Terry White mentions FullScreen or Browser Width using the Slideshow widget and as Jason Bibby at the top also mentions, I have not had any success using any of the SS Widgets again to acheive this effect. Pinning the SS Widget to the top of the Browser does just that and does not stretch images within it to fill the Browser Width even if you get inside the widget to expand an image so that it snaps to the edge of the Browser still does not do it regardless of weather its pinned or not.
I've had to jump into DW to get this done - in combination to using Fluid Grid, which I had rather not but so far so good, at least its responsive and not having to create twice in the case of Muse. I love Muse for its simplicity, being able to whip up pretty much any design in no time is sweet, but having a SS that stretches Browser width is a common trend and I'd like to see it integrated into Muse and if it can be done now as the video shows then how?
If you know how to do this in Muse could you please show us how?
Kind regards,
Kelvin

Full width responsive layout in Muse

Similar Messages

Maybe you are looking for