annoying vertical Div

Report · Mar 15, 2021

H Everyone,

Through the page properties Tab I've managed to create these two vertical marquees; The Idea was to have them to fill all the vertical space and be placed on the two opposite side of the viewport, after some tries Ihad all set as expected but unfortunately,it seems that a new div called "clearfix borderox" is created by Muse and it atomatically add space after the first Marquee bar. When I try to preview the code outside Muse everything looks fine. Is there any way to avoid this Div to be created?

Here is the codeI've used:

<html>
    <div class="position-fixed side-bar">
      <div class="row marquee">
        <div class="col-12 bg-white">
          <p class="m-0 p-0 p-3">
            <span class="m-0 p-0 pb-4" aria-hidden="true">benvenuti nel mio sito</span>
            <span class="m-0 p-0 pb-4" aria-hidden="true">benvenuti nel mio sito</span>
            <span class="m-0 p-0" aria-hidden="true">benvenuti nel mio sito</span>
          </p>
        </div>
      </div>
    </div>
    <div class="position-fixed side-bar2">
      <div class="row marquee2">
        <div class="col-12 bg-white2">
          <p class="m-0 p-0 p-32">
            <span class="m-0 p-0 pb-42" aria-hidden="true">benvenuti nel mio sito</span>
            <span class="m-0 p-0 pb-42" aria-hidden="true">benvenuti nel mio sito</span>
            <span class="m-0 p-02" aria-hidden="true">benvenuti nel mio sito</span>
          </p>
        </div>
      </div>
    </div>
</html>

<style >

.side-bar {
	top: 0;
	left: 0;
	height: 100%;
	color: black;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
    position: relative;


}


.marquee p {
	overflow: hidden;
	white-space: nowrap;
	height: 100%;
}

.marquee span {
	animation: marquee 8s linear infinite;
	display: inline-flex;
	font-size: 4vw;
padding-right: 10px;
}

@keyframes marquee {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}
.side-bar2 {
	top: 0;
	right: 0;
	height: 100%;
	color: black;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
 position: absolute;


}

.marquee2 p {
	overflow: hidden;
	white-space: nowrap;
	height: 100%;

}

.marquee2 span {
	animation: marquee 8s linear infinite;
	display: inline-flex;
	font-size: 4vw;
padding-right: 10px;

}

@keyframes marquee2 {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}


</style>

Report · Mar 15, 2021

As far as I experienced from other users and from the coders, been here much earlier, in Muse 100%height was not really working pretty well. I have no idea why Muse does, what you get, Nancy is more into code but might have no idea why Muse does this and she and me, we highly recommend to use something else than Muse, especially for your issue, as Muse is under EOL since 2018 and will cause more issues sooner or later. If you are a muse-themes member, these are the guys who may help as well, but they will have the smae message, I guess. If you are into code anyway, this shouldn´t be a big issue.

Kind Regards,

Uwe

Report · Mar 15, 2021

Muse is an EOL code generator, not a code editor. So you're at the mercy of an aging generator with quirks and limitations that date back to 2012 when Muse was first released. Unfortunately, Muse programming hasn't changed much since then and never will because it's discontinued and no longer in development. Muse is what it is and should not be used for new projects.

How do you envision your fixed divisions working on mobile phones and tablets? Have you tested it? I ask only because vertically fixed elements are likely to create more problems than they solve, especially on smaller viewports which just about everyone uses these days.

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

Report · Mar 15, 2021

I have to admit I was not expecting such prompt answers so thank you guys for your immensely useful help.

I'll start from the end:

On mobile I taught the division could just become horizontal;

As I am basically at the beginning of the project I can just start it somewhere else.

Is there any other alternative that allows me to be agile with the design and to put my hands on the code when I need it?

Thank you 🙂

Report · Mar 15, 2021

If you mean a drag & drop code editor, no. Drag & drop is not feasible with a true code editor. But Adobe Dreamweaver and Pinegrow both have visual displays that you can work with. I prefer Dreamweaver for its site management features which no other editor can touch. But Pinegrow is OK too for other reasons.

Dreamweaver interface:

Pinegrow interface:

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

Adobe Community

annoying vertical Div