Copy link to clipboard
Copied
Hi!
I did this super simple layout with my logo in the middle of the screen: Christian Bélanger, calligraphe
The page displays the way it is supposed to on iMac, MacBook Pro and iPad. But on the iPhone (5s), it displays well only in portrait orientation; in landscape orientation, my logo isn't centered on the screen and is too big (it doesn't seem to resize...).
Is it because the code doesn't consider the landscape orientation of phones?
Thanks!
Copy link to clipboard
Copied
You realize Muse is end of life, right? Adobe is discontinuing all support for Muse in March 2020.
IMO, Muse was never great at making responsive web sites. It catered to adaptive designers who made different layouts for different breakpoints which was OK for average mobile, tablet and desktop but it didn't gracefully handle everything in between. Then along came responsive web design which was better suited to ALL viewport sizes.
CODE ALERT. This is a responsive layout. You can do this very easily in any plain text editor like Notepad, Brackets or Dreamweaver. Just save the code below as filename.html and test in browsers. It's a lot less code than Muse generates too which is better for performance.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #000;
color: #FFF;
width: 80%;
margin: 0 auto;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
/**scale fonts on any screen size**/
font-size: calc(16px + 1.5vw);
}
.logo {
/**responsive image**/
width: 100%;
vertical-align: baseline;
}
</style>
</head>
<body>
<h1>My Responsive Web Page</h1>
<img class="logo" src="http://christianbelanger.net/images/cb_2x.jpg?crc=309148096" alt="My logo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae rerum temporibus sed reprehenderit eaque!</p>
</body>
</html>
Copy link to clipboard
Copied
https://forums.adobe.com/people/Nancy+OShea schrieb
You realize Muse is end of life, right? Adobe is discontinuing all support for Muse in March 2020.
IMO, Muse was never great at making responsive web sites. It catered to adaptive designers who made different layouts for different breakpoints which was OK for average mobile, tablet and desktop but it didn't gracefully handle everything in between. Then along came responsive web design which was better suited to ALL viewport sizes.
Muse will work until 2020, though - at least.
This is ridiculous, a lot websites outside are adaptive as well with no hazzle , nobody cares.
Yes, Muse can do responsive websites in many different ways, adaptive, fixed width breakpoints, fluid width breakpoints, if one knows how it works. Nancy doesn`t. Listen to Günter Heißenbüttel. Me, I am outside today …
Kind Regards,
Uwe
Copy link to clipboard
Copied
Again and again and again: Forget, what Nancy says (except the fact, that Muse is End of Life). Nancy never worked with Muse and proves with nearly every single of her posts, that she has no idea t all of how Muse works.
If I look at your sample site on desktop (Safari. Chrome), on 2 different iPads and 2 dofferent iPhones, all is working fine in any viewport. No issue with landscape mode.
If you think, there is a problem, please describe it as precisely as possible, give us a screenshot, and upload your .muse file to Dropbox or a similar file sharing service and share the download link with us. We certainly will be able to help – without using this completely unnecessary piece of code, which Nancy dropped into this thread.
Copy link to clipboard
Copied
I tried Nancy's thing and it's not doing what I want.
I am aware that Adobe is discontinuing all support for Muse in March 2020. However, it should continue to work on my computer, and it's the only way I know how to do simple Websites. I'm not a coder and I frankly don't care about all that clean code stuff.
Now back to the main subject...
On MacBook Pro and iPad, perfect:
On iPhone 5s, portrait orientation, perfect:
On iPhone 5s, landscape orientation, uncentered and probably not resized:
The page displays the way it is supposed to on iMac, MacBook Pro and iPad. But on the iPhone (5s), it displays well only in portrait orientation; in landscape orientation, my logo isn't centered on the screen and is too big (it doesn't seem to resize...).
Here is my file: WeTransfer
Thanks!
Copy link to clipboard
Copied
Do you mean "centered" in height? This would only be possible by adding a breakpoint and replace the image as you need it/want it.
For this you may have to resize the image as well so it fits in to your needs.
Much better it would be, if you could use that logo as a svg file without that black around it (excised, if you know what I mean).
Although the image should work pretty fine and does so in the google developer tools and safari as well, …
… it may cause some issue; I must admit, I don`t really know why. But maybe it is just better to use the black colour as browser fill and the logo just by itself. I am aware about Günter Heißenbüttel advice/solution here. The code from Nancy does not help here at all, I told you, Günter Heißenbüttel told you. Keep your ear to the ground.
KInd Regards,
Uwe
Copy link to clipboard
Copied
Do you mean "centered" in height? This would only be possible by adding a breakpoint and replace the image as you need it/want it.
Yes.
Sez the „Minimal Page Height“ (–> Page Properties) of your page to, let’s say, 100 px and it works fine.
The logo appears blurry on a big screen when I do that:
Thanks!
Copy link to clipboard
Copied
Vertical centering is super simple with CSS Grids or CSS Flexbox. See JS Fiddles below for examples.
https://jsfiddle.net/NancyO/9jtfvd5k/
https://jsfiddle.net/NancyO/pqhoc5r3/
Unfortunately neither technology has support from Muse. And while I understand a burning desire to keep doing things the easy way with Muse, the plain truth is Muse can't keep up with basic web standards or competing products. Hence the EOL. I really think it's time to find a Muse replacement sooner rather than later.
Also in light of recent events, I can't imagine what Adobe plans to do with Muse beyond 2020.
Copy link to clipboard
Copied
Nancy, PLEASE STOP THIS!
The initial poster decided, to use a centered image fill, and THIS IS SUPPORTED BY MUSE! I am really fed by your ignorance and pretended knowledge concerning Muse! Could you please concentrate on the Dreamweaver forum and stop confusing the Muse users here?
@ Syntax_One: To counteract eventual image blurriness, do this:
Now you certainly have the quality, which you are looking for.
You may compare the different results as follows:
If you want and need deeper information about image quality and image optimization in Muse, please read
my answer 4 here: https://forums.adobe.com/thread/1793996 and
my answer here: https://forums.adobe.com/thread/2371157
Since there are different approaches for vertically centring of elements, you may try a different solution for your issue too:
Copy link to clipboard
Copied
Sez the „Minimal Page Height“ (–> Page Properties) of your page to, let’s say, 100 px and it works fine.
Additionally: Please update your Muse application is is heavily outdated!