How To Vertically Position An Object Based On A Percentage Of The Browser ?

Explorer ,
Jun 23, 2017 Jun 23, 2017

Copy link to clipboard

Copied

Hi guys!

Basically, I want a code that does exactly what this widget does : Vertical Positioning Muse Widget - YouTube

The object must stay on the center and does not have to scroll with the browser.

I tried to use this code, but I did not figure out how to use it:

<div class="colelem" id="u4749" style="float:left; right:5px; top:50%; margin-top:-135px; position:fixed">

Does anyone has a code ready for that?

Thank you.

Views

2.4K

Likes

translate

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

correct answers 1 Correct Answer

Guide , Jun 24, 2017 Jun 24, 2017
<style>#u000 {position: absolute;   /* or fixed */top: 50vh;left: 50%;margin-top: -00px;margin-left: -00px;}</style>Where:#u000 = The ID of your object.margin-top = Half the height of your object with a negative value.margin-left = Half the width of your object with a negative value.

Likes

translate

Translate

Translate
Adobe Community Professional ,
Jun 23, 2017 Jun 23, 2017

Copy link to clipboard

Copied

Why don`t you use the widget?

Likes

translate

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
Explorer ,
Jun 24, 2017 Jun 24, 2017

Copy link to clipboard

Copied

Hi,

Thanks for your message.  Actually, I need pay $109,99 for a year subscription to get only that widget, That does not make sense at all doing that. 

Thanks anyway.

Likes

translate

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
Jun 23, 2017 Jun 23, 2017

Copy link to clipboard

Copied

Hi Luno,

Agreeing to what fotoroeder said, Yes why don't you try the same widget or anything similar to it.

I was browsing through the internet to find a solution for you and got this discussion on MuseThemes forum - Center elements on the page | MuseThemes Forum.

Please see if this helps.

Regards,

Ankush

Likes

translate

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
Guide ,
Jun 24, 2017 Jun 24, 2017

Copy link to clipboard

Copied

<style>

#u000 {

position: absolute;   /* or fixed */

top: 50vh;

left: 50%;

margin-top: -00px;

margin-left: -00px;

}

</style>

Where:

  • #u000 = The ID of your object.
  • margin-top = Half the height of your object with a negative value.
  • margin-left = Half the width of your object with a negative value.

Likes

translate

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
Explorer ,
Jun 24, 2017 Jun 24, 2017

Copy link to clipboard

Copied

Hello,

Well, I tried that and does not works. 

Any other idea?

Thank you

Likes

translate

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
Explorer ,
Jun 24, 2017 Jun 24, 2017

Copy link to clipboard

Copied

*** UPDATE ***

It works. I did not know I had to inspect the element to know its ID. I was using the ' graphic style panel.

But now, I face another problem. It does not works across the breakpoints.  I think it is because  I changed the logo size.

How can I make that work across the breakpoints?

Thank you.

Likes

translate

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
Guide ,
Jun 24, 2017 Jun 24, 2017

Copy link to clipboard

Copied

If you use fluid breakpoints, then you do not need a piece of code.

<style>

#u000 {

position: absolute;   /* or fixed */

top: 50vh;

left: 50%;

margin-top: -00px;

margin-left: -00px;

}

</style>

Instead, place the object in the center and use pinning on the page.
84392e4bf5.png

If you do not change the size of the object at different breakpoints, then this code will be enough, and it will work fine.

If you need to resize, you must write code for each breakpoint, with different sizes. As you can see, in the screenshot above there are 3 breakpoints -  960; 768; 500. At each breakpoint, I changed the size of the object.
1c1422fa56.png

be22902631.png

1fc2c13521.png

The code will look like this:

<style>

/ * For screens larger than 960x * /

@media all and (min-width: 960px) {

    #u94 {

position: absolute;

top: 50vh;

margin-top: -70px;

     }

   }

/ * For screens less than 960px * /

@media all and (max-width: 960px) {

    #u94 {

position: absolute;

top: 50vh;

margin-top: -70px;

     }

   }

/ * For screens less than 768px * /

@media all and (max-width: 768px) {

    #u94 {

position: absolute;

top: 50vh;

margin-top: -56px;

     }

   }

/ * For screens less than 500px * /

@media all and (max-width: 500px) {

    #u94 {

position: absolute;

top: 50vh;

margin-top: -47px;

     }

   }

</style>

Learn CSS CSS Tutorial 

Likes

translate

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
Explorer ,
Jun 25, 2017 Jun 25, 2017

Copy link to clipboard

Copied

Well, I will have a look. 

Thank you very much, I appreciated it.

Have a good one,

Iuno

Likes

translate

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