Highlighted

How to make objects move vertically in relationship with other objects

Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

Title says it all. I am experiencing this problem in form of a rectangle with image fill on the left half of the page (width and height responsive), a vector graphic in the center (also fully responsive), and a text field (width responsive only) on the right half of the page. I want them all to have their vertical centers aligned at all times.

Yet when I slide between breakpoints, while the rectangle scales and moves as expected, the vector graphic and the text don't. The text much more intensely than the graphic, but nonetheless - they do not move vertically at the same rate at which the rectangle does.

So my question is this: How can I create a relationship between two or more objects, in which one or more objects follow the positioning of a single key object?

These are the things I have tried: Grouping in various combinations- no success, Grouping with Rectangle Frame aligned to transform origin - no success, pinning - no success. More breakpoints - kind of works but slows down the page immensely and to an unbearable level while ultimately still leaving objects shifting in between breakpoints, so - no success.

 

Any help would be greatly appreciated. This is driving me mad.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Vertical centering is possible with modern CSS Flexbox and CSS Grids.  Unfortunately, neither are supported by Muse. 

 

If you're interested, I can show you how to do it with code in a real code editor like Dreamweaver or Brackets.  

 

=======================

Muse is EOL.  Support for Muse is ending very soon, on Mar 26.

 

TOPICS
Bugs, How to, Responsive design

Views

715

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

How to make objects move vertically in relationship with other objects

Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

Title says it all. I am experiencing this problem in form of a rectangle with image fill on the left half of the page (width and height responsive), a vector graphic in the center (also fully responsive), and a text field (width responsive only) on the right half of the page. I want them all to have their vertical centers aligned at all times.

Yet when I slide between breakpoints, while the rectangle scales and moves as expected, the vector graphic and the text don't. The text much more intensely than the graphic, but nonetheless - they do not move vertically at the same rate at which the rectangle does.

So my question is this: How can I create a relationship between two or more objects, in which one or more objects follow the positioning of a single key object?

These are the things I have tried: Grouping in various combinations- no success, Grouping with Rectangle Frame aligned to transform origin - no success, pinning - no success. More breakpoints - kind of works but slows down the page immensely and to an unbearable level while ultimately still leaving objects shifting in between breakpoints, so - no success.

 

Any help would be greatly appreciated. This is driving me mad.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Vertical centering is possible with modern CSS Flexbox and CSS Grids.  Unfortunately, neither are supported by Muse. 

 

If you're interested, I can show you how to do it with code in a real code editor like Dreamweaver or Brackets.  

 

=======================

Muse is EOL.  Support for Muse is ending very soon, on Mar 26.

 

TOPICS
Bugs, How to, Responsive design

Views

716

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
Feb 07, 2020 0
Adobe Community Professional ,
Feb 07, 2020

Copy link to clipboard

Copied

Vertical centering is possible with modern CSS Flexbox and CSS Grids.  Unfortunately, neither are supported by Muse. 

 

If you're interested, I can show you how to do it with code in a real code editor like Dreamweaver or Brackets.  

 

=======================

Muse is EOL.  Support for Muse is ending very soon, on Mar 26.

 

Nancy O'Shea, ACP
Alt-Web.com

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
Reply
Loading...
Feb 07, 2020 0
Community Beginner ,
Feb 09, 2020

Copy link to clipboard

Copied

Hi Nancy,

 

that would be awesome, thank you for offering. I have some basic dreamweaver and html/css knowledge, but didn't think it would be enough to make it look nice, so I went with Muse in the end.

 

Cheers,
Mark

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
Reply
Loading...
Feb 09, 2020 0
Adobe Community Professional ,
Feb 10, 2020

Copy link to clipboard

Copied

Here's one way.  But there are a dozen different ways to do this. 

 

image.png

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered, CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**Default mobile-first**/
.flex-container {
display:flex;
flex-flow: column nowrap;
background-color: darkslategray;
color:white;
justify-content: space-evenly;
}

.flex-container > div {
width: 95%;
padding: 0.5%;
text-align: center;
font-size: 1.25rem;
border:1px solid aliceblue;
}

/**responsive image**/
.flex-container img { max-width: 100% }

.big-icon {font-size:8rem}

/* Media query for tablets & desktops */
@media only screen and (min-width: 680px) {

.flex-container {
display:flex;
flex-flow: row wrap;
align-items: center;
}

.flex-container > div {
width: 30%;
}
}
/**end of media query**/
</style>
</head>
<body>
<h1>Flexbox Vertically Centered</h1>

<div class="flex-container"><div>
<figure>
<img src="https://dummyimage.com/500x500" alt="placeholder">
<figcaption>Caption</figcaption></figure>
</div>
<div><p class="big-icon">&copy;</p></div>
<div><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure enim error sit quisquam ut, id, eveniet omnis repellat qui esse nam quae laborum modi voluptatum. Impedit nostrum unde, aliquam molestiae?</p></div>
</div>
</body>
</html>

 

 

Nancy O'Shea, ACP
Alt-Web.com

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
Reply
Loading...
Feb 10, 2020 0
LEGEND ,
Feb 07, 2020

Copy link to clipboard

Copied

 Could you show us an example or a scribble to make sure, that we understand correctly, what yo mean?

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
Reply
Loading...
Feb 07, 2020 0
Community Beginner ,
Feb 10, 2020

Copy link to clipboard

Copied

Hi Guenter,


I have since redesigned the page to go without the section that was causing the issue. I would also like to learn how to do it in Dreamweaver, as Nancy has offered earlier, so I think I no longer need your help on this matter.

I  am however running into some issues with the footer on my master page, so I will make a post about that if I can't figure it out soon. Perhaps you'll be able and willing to help with that.

 

Cheers,
Mark

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
Reply
Loading...
Feb 10, 2020 0
LEGEND ,
Feb 10, 2020

Copy link to clipboard

Copied

Fine! Just ask, if you run into an issue! Hopefully we can help!

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
Reply
Loading...
Feb 10, 2020 1