• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Not considering landscape orientation on iPhone?

Engaged ,
May 19, 2019 May 19, 2019

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!

Views

534

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
Community Expert ,
May 19, 2019 May 19, 2019

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>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
LEGEND ,
May 19, 2019 May 19, 2019

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

Votes

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
LEGEND ,
May 19, 2019 May 19, 2019

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.

Votes

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
Engaged ,
May 20, 2019 May 20, 2019

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:

Screen Shot 2019-05-20 at 11.17.51 AM.png

On iPhone 5s, portrait orientation, perfect:

IMG_0485.PNG

On iPhone 5s, landscape orientation, uncentered and probably not resized:

IMG_0486.PNG

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!

Votes

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
LEGEND ,
May 20, 2019 May 20, 2019

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, …

Bildschirmfoto 2019-05-20 um 18.24.31.png

… 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

Votes

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
Engaged ,
May 20, 2019 May 20, 2019

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:

Screen Shot 2019-05-20 at 2.06.24 PM.png

Thanks!

Votes

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
Community Expert ,
May 20, 2019 May 20, 2019

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.

No more legacy CC apps

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
LEGEND ,
May 20, 2019 May 20, 2019

Copy link to clipboard

Copied

LATEST

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:

  • Choose the widest breakpoint at ca 1200 px
  • Create a second breakpoint at ca the screen height of a smart phone (700 px) to match landscape mode.

Now you certainly have the quality, which you are looking for.

You may compare the different results as follows:

  • Choose a page height of 200 px and „Export as HTML …“. Now have a look at the pixel sizes of the exported images.
  • Now create a breakpoint at 1200 px and a second one at 700 px and „Export as HTML …“ again. Compare the pixel sizes of these exported images with the image data of the former export.

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:

Votes

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
LEGEND ,
May 20, 2019 May 20, 2019

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!

Votes

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