How to fit content to 100% width?

Hi There, I couldn't figure out how to get my content to display at 100% width when I designed the background of my website in Muse so I tried designing it in illustrator then exporting it as an image to upload into Muse. I designed it to the default dimensions of Muse and it still doesn't fit the content window even when I snap it to the red guides it doesn't fit to 100% width. I even loaded some code into the master page HTML properties to stop the horizontal scrolling but that doesn't work either.

Hi Brad,
Thanks for your reply. Icame across that instruction in my search yesterday, I did it as you said but it still doesn't scale to the page width. It does in preview mode, but when I publish it it has a white box around the content. I set it to tile horozontally. I exported this image as a psd and a png file both have the white area around them when published.

Similar Messages

How to fit frame to content when content contains anchored text box?

Hi there
I am creating a series of inline text frames within a text frame. Each of these inline frames contains text which includes an anchored text frame. If I tell my inline frames to fit to content they seem to ignore the anchored frames contained therein. Is there any way I can get them to consider the anchored frames they contain when they fit to content?
I tried checking the geometric bounds of my anchored frame before and after its parent frame has fitted to content. Even when there has been no change in position the bounds after fitting to content seem to give numbers way off. I thought I might be able to reset the geometric bounds of the containing frame manually if the anchored frame therein had moved with the fit frame to content.
Here is a snippet of my code:
var anchoredBounds = anchoredFrame.geometricBounds;
mainFrame.fit(FitOptions.FRAME_TO_CONTENT);
mainFrame.texts.item(0).recompose;
var newAnchoredBounds = anchoredFrame.geometricBounds;
alert(anchoredBounds[0] + "; " + newAnchoredBounds[0]);
So “mainFrame” is the text frame containing text and the anchored frame, “anchoredFrame”. “anchoredBounds[0]” seems to correlate with the top edge of the frame when I check it manually after the script has finished (when it hasn’t move with the fit to content). “newAnchorBounds[0]”, however, always gives numbers that are way off every time. Any ideas why this would be the case?
And most importantly, can anyone suggest how I can get my “mainFrame” to consider the “anchoredFrame” contained in it when it fits to content?
I’m using CS4 on a PC. Let me know if it would help to post more code, or if I haven’t explained myself clearly enough.

Is there any way I can get them to consider the anchored frames they contain when they fit to content?
@Graham – as long as ALL the anchored text frames are "inline" text frames,
mainFrame.fit(FitOptions.FRAME_TO_CONTENT);
should work as expected or at least sort of *.
Without calculating anything at all.
Just tested in InDesign CS5.5 (v7.5.3).
Could it be that CS4 will fail on that?
Of course, you can only rely on this, if the main text frame contains any "real" text at all. Not only the special characters representations of the "inline" text frames. In that case the fit() method will do nothing at all.
* it's debatable, if the fit() method yields desirable output.
It depends on your expectations.
See the following examples:
1. Case 1:
Text frame before fitting:
2. Case 1:
After fitting with the UI command, context menu: "fit frame to contents"
(note the gap between the last baseline of the text and the text frame; note also the new width)
Is that the result you would expect? I guess not.
3. Case 1:
After fitting programmatically with myTextframe.fit(FitOptions.FRAME_TO_CONTENT);
4. Case 2:
Before fitting
same text frame as in #1, but different height
5. Case 2:
After fitting with the UI command, context menu: "fit frame to contents"
A different width than in #2 and a gap at the bottom of the text frame!
Not the desired result, I'd say…
6. Case 2:
After fitting programmatically with myTextframe.fit(FitOptions.FRAME_TO_CONTENT);
Same result as in #3
So with scripting we could, at least, get consistent results.
Of course, you could get the same results in the UI, if you double-click on the bottom center control point…
Maybe it helps, if you are showing us some screen grabs:
1. Your starting point
2. The desired result
Uwe

How do I make my webpage 100% width on any desktop resolution?

Hi,
I designed a website mockup on Photoshop with the dimensions of W: 1280 x H: 2464 but when placing the JPG file on the empty homepage
to see how it would look and fit, it wasn't taking up the whole screen and instead was centre and there was white background left and right.
I'm viewing this on my desktop thats 1920x1080.
I'm new to Muse so I'm not sure what is the best dimension settings to choose for a website that would work great on almost any desktop.
An exmple of the style of website I want to create is the Nestea website
For the header and footer of my website I have a huge image instead of a solid colour.
I know the images have to be really large so they don't get stretched out and loose quality but
if someone could tell me the dimensions and settings to put when creating a new website so that
I could re-mockup the website with the same dimensions and that if I placed the JPG file to see how it
would look, that it would fit edge to edge and not loose any quality.
Thanks

Hi,
You may find the below resources helpful in getting you started with a flexible width site in Muse similar to the example you provided.
http://tv.adobe.com/watch/muse-feature-tour/muse-design-for-flexible-browser-width
https://helpx.adobe.com/muse/how-to/add-100-width-slideshow.html
http://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
http://tv.adobe.com/watch/learn-adobe-muse-cc/adding-scroll-effects/
http://helpx.adobe.com/muse/using/scroll-effects-opacity-slideshow-animate.html
Cheers,
Vikas

How can I specify figure width percent in a div and still default to 100% width on small media

In fluid grids, I want a div that will display a figure and figure caption within a box where I can specify the float (left, center or right) and the percent width that defaults to 100% width below some display size. I would like this div to display correctly on all browsers and as many Internet Explorer versions as possible.
This appears to work fine in my fluid.css:
.myfig {
            background-color: #DAE7F1;
            border: medium solid #000;
            padding: 4px;
            margin: 4px;
            text-align: left;
             width: 33%;
/* On phones and vertical tablets make all figures 100% wide */
@media only screen and (min-width: 0px) and (max-width: 700px) {
    .myfig {
        width: 100%;
and my test.html:
<div class="myfig" style="float:right;" >
   <img src="Images/time-to-adapt.jpg" alt="stuff">
   Figure caption
</div>
But if I put the width in
<div class="myfig" style="float:right; width: 50%;" >
The figure will be 50% so this overrides the default 33% but the figure does not revert to 100% for small media.
I assume the problem is in the order of processing. Anyone know how to make this work or of a definition that will meet my needs?

Use CSS classes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, 3-figures</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/**put this into your CSS Reset**/
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     margin: 0;
     padding: 0;
img {
     width: 100%;
     vertical-align: baseline
body {
     font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
     font-size: 100%;
     background-color: #536475;
     margin: 0 auto;
     padding: 0;
section {overflow:hidden;}
figure {
     float: left;
     padding: 2%;
     text-align:center;
     color:#FFF;
     font-size: 95%;
/**re-usable classes**/
     .twenty {width:20%}
     .forty {width:40%}
     .sixty {width:60%}
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 768px) {
     figure, .twenty, .forty, .sixty {
          float: none;
          display: block;
          margin: 0 auto;
          width: 98%;
          font-size: 75%;
</style>
</head>
<body>
<section>
<figure class="twenty"><img alt="description" src="http://placehold.it/200x125"><p>Fig.1</p></figure>
<figure class="forty"><img alt="description" src="http://placehold.it/200x125"><p>Fig.2</p></figure>
<figure class="sixty"><img src="http://placehold.it/200x125" alt="description" ><p>Fig.3</p></figure>
</section>
</body>
</html>
Nancy O.

How can I set 100% width my slideshow on mobile version

Hello!
It's been a while I needed to ask this question here but a huge problem of authentication from ADOBE forum took months to be solved by them.
Anyway, I have a website made with muse (desktop). I tried to decline it in tablet and photo version as it said ti be easy from abode muse team video.
But the sideshow photo don't behave in the mobile version as expected.
http://demis.nu/phone/modeles.html
the worse is the landscape orientation. The photos are just to big for the screen.
I tried 100% width, and cancelled it, I tried to resize the size of the photo to fit the both sides of the page...anyway, anything I tried wasn't satisfying.
I know the solution is to make it responsive but I couldn't be able to find the way to do it in Muse.
I tried the demo of muse in the early hours (2011) and years after it's obvious the adobe muse team have understood responsive design rules everything and I'm sure they implemented it but can't find it.
Can someone give me a help please because the phone version is online and is horrible.
thank you so much.

No one could help me please?

How to set an object to 100% width now that Muse no longer has the button?

I'm trying to set a slideshow to 100% width like the tutorials constantly talk about, but that is no longer possible in the latest version of Muse. The button is gone. So how do you do it? And why did Adobe remove the 100% width button? They seemed proud of it when it was released as a new feature.

Hi,
The 100% width option is available for the slideshow widget. But to use it in your slideshow, make sure you have selected the "Hero Image" of the slideshow and then click on the button of the 100% width option.
Please refer to this screenshot :- http://prntscr.com/567j41
Hope this helps
Regards,
Rohit Nair

How to achieve 100% width banner graphic atop page that handles user resolution changes

I have a banner that can be divided into three distinct pieces. I'd like to achieve the following distribution:
Left piece 60%, middle 20%, and right 20%
In HTML I'd just use a 100% width table and set cell widths to those percentages from left to right. How's this done in Flex?
I'm trying all manner of ConstraintColumn configurations but it appears I can only get two columns to work at say 60%-40%, and not three as listed above.
Is ConstraintColumn the right place to be looking here or is there some better approach?
Thanks

Works like a charm with horizontalGaps set to 0. Thanks much.

Adobe Muse 100% Width Content

Hi! I'm trying to follow this tutorial: Adobe Muse Tutorial - Responsive Design Hack! by MuseThemes.com - YouTube
The idea is that using text box, making it 100% width then cutting and pasting your content in it, it will be responsive like that. However, I've had no luck. I followed it over 3 times, did exactly what he did and did not get the same result. The result I got was content that just centers but does not stack like that once the browser is shrank.
Here's the site: www.littlecakefarm.com
I'm wondering what I'm doing wrong?

Seems text frame is not full width , please try to check and make that full width and preview. It should work with full width frame.
Thanks,
Sanjit

How to centre the stage of 100% width in a browser?

I have created a web page in Edge that I intend to be centred in the web browser. If I keep the stage to fixed width (960 px) then I can centre it in the browser with the following in the compositionReady event of the Stage:
$("#Stage").css("margin","auto");
However, I want to create a tiled background, for which I use the following in the compositionReady event of the Stage:
$("#Stage").css("background-image","url(images/[email protected])","background-repeat","re peat");
If I keep the stage to fixed width then I don't see the tiled background because the stage is full of objects and the tiled background doesn't extend past 0 and 960px. If I make the stage width 100% then everything becomes left-aligned, but I do see the tiled background (to the right of the stage objects).
I've tried thinking of clever ways to position everything relative to some transparent element that has its width property set to 100%, but to no avail.
Does anyone know of a way to ensure that everything positions relative to the centre of the stage while retaining the 100% width stage property?

Zaixist posted this a long time ago and you might want to try it:
$("body").css({
            "background-image":"url(images/yourBghere.jpg)",
            "background-position":"center center fixed",
            "background-repeat":"repeat",
            "-webkit-background-size":"cover",
            "-moz-background-size":"cover",
            "-o-background-size":"cover",
            "background-size":"cover"
$("#Stage").css({"margin":"0 auto"})
jQuery.fn.center = function(){
this.css("position","absolute");
this.css("top","50%");
this.css("left","50%");
this.css("margin-top","-"+(this.height()/2)+"px");
this.css("margin-left","-"+(this.width()/2)+"px");
return this;}
sym.$(".center").center();

How to make an Imagine in Adobe Muse span 100% width and 100% height.

Hello,
So this has been really puzzling me for a long time now and I have not found the correct answer.
I want to create the effect on my website where I have an image that fills the screen now matter what size screen you look at it from. I know that this is possible with the 100% width option but you cannot replicate the same thing with the height.
The best way to explain what i mean is by showing this example I have found:
Nils Frahm
If you look at this site, the image fills the screen, use your zoom in and out tools and you will notice no matter what your zoom the page still stays in full screen view! Now, wat's evem better is when you go to scoll using your mouse wheel or the scroll bar, you will notice this full screen image then scrolls up.
Summary:
What I want is a full screen image which covers the screen no matter what size you look at it.
Any ideas??

Yes, you can create that.
Use the image as browser fill with position and apply scroll to fill , so that at certain key position the image will also scroll.
Something like this : http://imagescroll01.businesscatalyst.com/index.html
Thanks,
Sanjit

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
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 FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

100% width slide show misaligns content placed over it

I have been able to replicate this a few times and was wondering if anyone had any insight or the same issue:
1. Add 100% width slide show (full page) to page from widget menu.
2. Once established, add 100% width rectangle at top ( this is where logo and horizontal menu will go)
3. Add logo and menu over 100% width rectangle.
4. Change opacity of rectangle to 64%
5. Publish to BC
Upon publish, the rectangle gets pushed up about 40px and the logo and menu and pushed down about 20px. It seems something gets inserted? Very frustrating. I have tried putting the slide show in a separate layer as well. No luck.
on PC, windows 7 ultimate.

Sure: Home
This is a basic page:
Full page/width slide show - you can see that I only deleted the captions and arrows - no other changes to slideshow.
Full page slide show with a rectangle (no border, opacity 77%. height: 102px)
Tagline over the rectangle.
Logo Rectangle with "Logo" text over that.
You can see the transparent rectangle gets pushed up, the other elements remain in place.
I can replicate this over and over and just did this example on a Windows machine again - different computer.

How do I repeat image 100% height in a box within the template

I have built a new template that already has a background image behind the content area. This background image is 100% width and height. Now I have made the header area, the content area and the footer area. What I am needing some help with is: I want to have a box behind the content area that continues into the footer. In that box I want a repeated background pattern that continues regardless of the amount of content in the content area. I know how to do this using tables and code, but I can't seem to figure it out in MUSE. I have added the box, added the repeated verticle image, but it won't expand downward 100% height. It just stops at the height of the box that was built in MUSE and then the repeated background stops too... Can someone explain to me how to do this properly? It's all I have left and then this site template is complete.
Tom

Can you elaborate please. I have built a template (or master page) with this box in it and it starts just below the line of the header and extends to the bottom of the page. It has a repeated verticle image inside it. What happens though is that I build a page and assign the master to it, add a content box into the page for text and images. If the content extends downward past the original size of the master page box height, the box will not extend itself with the height needed for the content. IE: if the box is 600px high in the master and then the content is 1000 px high, the box will not expand to the 1000 px height and instead stop at the 600 px height.
Is there a tutorial with this in it somewhere? I have build numerous MUSE sites both small and large and have yet to do this repeatable background pattern behind just the content area separate from the background image itself.
Thanks for your help.
Tom

100% width items doesn't display correctly on iOS

On this thread "
New Features now available in Adobe Muse
http://forums.adobe.com/message/4636052
It states:
"The display of 100% width items on iOS devices is now enabled."
I can not get this to work. Tested my site on iPad, Android and iPhone.
Full width items do not expand.
The black background in the header is cut off.
How do I correct this.

Hi Andrew,
Here is a link: http://www.brandtimmigration.com
My page width is the default 960 so I am using the viewport=1160 on the home page only:
<meta name="viewport" content="width="1160">
It loads correctly in portrait initially on iOS. If you resize the page or adjust the view to landscape you experience my problem. Here is a screenshot:
http://cl.ly/image/0B2f0x0D021T
Thanks in advance for your help.

Insert 100% width flash banner in HTML

Hi all,
i am trying to insert a 100% width flash banner in an html
page. The problem i am facing is that i am inserting the banner
inside a div which has some margin in it. This is effecting the
percentage size of the flash banner. How can i display the flash
banner in that div without the margin width effecting the flash
banner size.
(01) - <div style="margin:0px;"> <object
classid="somevalues"></object>
The size of the flash banner is perfect and when the window
is resized the flash banner fills in perfectly with the div tag and
the retains its width and height
(02) - <div style="margin:50px;"><object
classid="somevalues"></object>
The flash banner gets effect and the width is effected.
Please help....

> BUT if I try to insert a Flash movie/banner into the
template - then it
> does not appear of ANY of the site files.
Because of the active content .js fix, when you insert a .swf
file into a
template, you must use a Site Root relative path for it.
Open the .dwt template file.
Double-click on the .swf in design view- the "browse to file"
dialog box
should come up showing the currently selected file.
look in the bottom of that dialog box for the pulldown to
change from
document relative path to site root relative path. Change it
to site root.
click okay and save the file, and let changes propagate.
does it show in the child files now?
[note- It may still not show during local preview because
site root relative
paths in javascript will not make any sense during local
preview- they
should work fine on the remote host if the site has it's own
domain name
though]
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

How to fit content to 100% width?

Similar Messages

Maybe you are looking for