Adobe muse help

New Here ,
May 25, 2018 May 25, 2018

Copy link to clipboard

Copied

Hey guys I am new to Adobe Muse and I am having a minor issue that is probably something I did or did do so I was hoping to get some help. I have created a basic layout of my website still in early design process but when I view it in site it looks fine but if I shrink the browser this happens   Screen Shot 2018-05-25 at 7.31.07 PM.pngScreen Shot 2018-05-25 at 7.31.24 PM.png

Views

818

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , May 27, 2018 May 27, 2018
Hi Matthew,let me reduce the issue to your master B-Master (like your screenshot from your original post).You use quite a lot rectangles for what?You did not set up your responsive layout for – your minimum width is set to 1020 instead of 320 (to say just one common number ).In your header this huge amount of rectangles lead to this strange appearance as soon as you move that scrubber:Finally you set up two anchors on the right hand side and one anchor on the left hand side???Anchors should be p...

Likes

Translate

Translate
Adobe Community Professional ,
May 25, 2018 May 25, 2018

Copy link to clipboard

Copied

May I ask what happens? The Screenshots (at least on mobile) explain not too much. Although a picture says more than a thousand words, I don't get it  

Is it something with the footer? Or something with the header menu?

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 26, 2018 May 26, 2018

Copy link to clipboard

Copied

Everything in the picture just gets off center and un align the pics above show the issues when I shrink the browser it is in

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2018 May 26, 2018

Copy link to clipboard

Copied

Could you provide this simple .muse – just the header and the footer.

The easiest might be to save a copy of the very reduced file into you CREATIVECLOUD FILES folder and by RIGHT CLICK

share a link with us.

I guess, you simply have no breakpoint or have some element(s) at the mobile breakpoint outside the canvas.

You could check this by using the scrubber and watch out.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2018 May 26, 2018

Copy link to clipboard

Copied

matthews70655993  wrote

Hey guys I am new to Adobe Muse and I am having a minor issue that is probably something I did or did do so I was hoping to get some help. I have created a basic layout of my website still in early design process but when I view it in site it looks fine but if I shrink the browser this happens   Screen Shot 2018-05-25 at 7.31.07 PM.pngScreen Shot 2018-05-25 at 7.31.24 PM.png

In case you missed the memo, Muse is ending life soon.  And while you can keep using it if you want to, it's my considered opinion that people should start looking at Muse alternatives sooner rather than later.  Muse is fine for quick comps or mock-ups, but beyond that, it's not ideal for building modern websites.

A layout such as this can be done very easily in Dreamweaver with a responsive Bootstrap template (see screenshot).  And you won't have to mess around with breakpoints unless you want to do something special.   In short, a code editor like Dreamweaver, gives you lots of freedom in ways a code generator like Muse can't.

CC-StarterPage.jpg

Another option is  Adobe Portfolio (free with qualifying Creative Cloud Plans).  It's dirt simple to use and you can have your Portfolio up & running in under 30 minutes.  No coding or hosting required.

Adobe Portfolio | Build your own personalized website

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2018 May 26, 2018

Copy link to clipboard

Copied

But Matthews, if you still need help in muse, follow my suggestions and share a link with us.

I guess footers and headers are quite easily done in every web app, I hope.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2018 May 26, 2018

Copy link to clipboard

Copied

True.  But but some tools work better than others .

Same layout on mobile & desktop, no breakpoint settings required.

Code.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 with Flexbox</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

body { min-height: 100vh; padding-top:25vh;}

.flex-grow { flex: 1; }

</style>

</head>

<body class="d-flex flex-column">

<!--responsive navbar-->

<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center fixed-top"> <a class="navbar-brand" href="#">Brand/Logo</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">

<ul class="navbar-nav ml-auto">

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>

<li class="nav-item"><a class="nav-link" href="#">Resum&eacute;</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</nav>

<div class="container flex-grow">

<div class="row">

<div class="col">

<h1>Hello World!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos, distinctio. Nostrum omnis illo repudiandae quis, sit unde laboriosam odit fugit nulla itaque fugiat dicta reiciendis, excepturi rerum, voluptate accusantium!</p>

</div>

</div>

</div>

<footer class="bg-dark text-white mt-4">

<div class="container-fluid py-3">

<div class="row">

<div class="col-md-4 text-center">

<h5>Footer Column 1</h5>

</div>

<div class="col-md-4 text-center">

<h5>Footer Column 2</h5>

</div>

<div class="col-md-4 text-center">

<h5>Footer Column 3</h5>

</div>

</div>

<div class="row">

<div class="col-md-6">

<small>Footer remains at page bottom on short pages.</small></div>

<div class="col-md-3"></div>

<div class="col-md-3 text-right small align-self-end"><small>©2018 XYZ Company</small></div>

</div>

</div>

</footer>

<!--latest jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

I tried but the link was rejected by a moderator

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

matthews70655993  schrieb

I will try again here the link

http://192.168.1.106:33333/Preview/revamped-site/index.html

Your link is simply not a weblink but from your local server/computer.

You should put your copy here:

Bildschirmfoto 2018-03-06 um 14.16.59.png

In here you can right click on the file and get asked wether to share a link or:

Bildschirmfoto 2018-05-27 um 16.03.57.png

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

alright is this is then

Adobe Creative Cloud

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Is dreamweaver all code or can I add different effect like says some square and circle with text in them those are just example of what I mean or do I have to write the code as I tried but was instantly confused by it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

matthews70655993  wrote

Is dreamweaver all code or can I add different effect like says some square and circle with text in them ...

DW is a tool to help coders build web sites and applications.  It's assumed that you understand basic web design theory and code (HTML, CSS, JavaSccript, XML, SVG, etc....)

Squares & circles are shapes.   You can create shapes in Illustrator or Photoshop and export them as SVG images. Then insert images into your web project.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Honestly I am very new to web building that is why I am trying to build them I know basic web design theory by I have not learned much about code that is why I am put off by DW as it seems to be all code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

DW is not all code.  But as soon as you want to do something advanced, you will need coding skills.  Native HTML, CSS & JS files can be maintained in ANY code editor.

If you don't have any interest in learning code, use a DIY system like Adobe Portfolio, Wix or one of the other Muse Alternatives.   But keep in mind that any app that uses proprietary files is not going to be portable to other apps.

See the Google Sheet.

Muse Alternatives - Google Sheets.

Discussions

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Hi Matthew,

let me reduce the issue to your master B-Master (like your screenshot from your original post).

You use quite a lot rectangles for what?

Bildschirmfoto 2018-05-27 um 20.40.54.png

You did not set up your responsive layout for – your minimum width is set to 1020 instead of 320 (to say just one common number ).

In your header this huge amount of rectangles lead to this strange appearance as soon as you move that scrubber:

Bildschirmfoto 2018-05-27 um 21.02.23.png

Bildschirmfoto 2018-05-27 um 21.01.05.png

Finally you set up two anchors on the right hand side and one anchor on the left hand side???

Anchors should be placed on the left hand side of the page border. This is not the main issue  but at least later on it could lead to strange appearance on mobiles.

To go deeper (without the real basic knowledge of webdesign code css or whatever ) we would need to know what you want to achieve?

And of course this is not the best way to bevel the header and the menu, but you should better use either a form created in Illustrtaor (svg, as Nancy suggested) or PS and the menu as you did already.

From here you may have some more questions? Ask.

Watch the file, in order to dive deeper:

https://adobe.ly/2JaueyP

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

First off thank you but I like I said I am really new to web design and unfamiliar with Muse cc. I was trying to create a line at a 2 degree angle and then have a separate color in the space above but I did not see a to do this without creating all the rectangles. also I meant to delete those anchor but forgot to lol.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Did you understand "my" file? That´s one themain questions. Maybe you start first without the 2 degree bevel, in order to get to know muse better. And of course, after two years muse won`t get updated anymore. Keeping this in mind, might avoid too much waste of time.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Yeah I understand I will probably look into DW

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

matthews70655993  wrote

I was trying to create a line at a 2 degree angle and then have a separate color in the space above...

That would be best done in a graphics app like Photohsop and exported as a JPG or PNG background image. 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

Thank you

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 27, 2018 May 27, 2018

Copy link to clipboard

Copied

LATEST

Welcome 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines