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
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
...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
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
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
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
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.
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
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
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é</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>
Copy link to clipboard
Copied
I tried but the link was rejected by a moderator
Copy link to clipboard
Copied
I will try again here the link
Copy link to clipboard
Copied
matthews70655993 schrieb
I will try again here the link
Your link is simply not a weblink but from your local server/computer.
You should put your copy here:
In here you can right click on the file and get asked wether to share a link or:
Best Regards,
Uwe
Copy link to clipboard
Copied
alright is this is then
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.
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.
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.
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
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?
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 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:
Best Regards,
Uwe
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.
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
Copy link to clipboard
Copied
Yeah I understand I will probably look into DW
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.
Copy link to clipboard
Copied
Thank you
Copy link to clipboard
Copied
Welcome