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.
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.
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.
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
Copy link to clipboard
Copied
Here's one way. But there are a dozen different ways to do this.
<!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">©</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>
Copy link to clipboard
Copied
Could you show us an example or a scribble to make sure, that we understand correctly, what yo mean?
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
Copy link to clipboard
Copied
Fine! Just ask, if you run into an issue! Hopefully we can help!