Streaming live at 10am (PST)

Location of div box changes


#1

https://preview.webflow.com/preview/pixelcell-186afcb91866b17-ac3f49c0d3a6e?preview=ac6a6e9591d069aeb40d090e37c7fe87

can you guys tell me why my center logo changes location from editor to preview. it has happened many time in the past. I just keep pulling the ropes and levers until it stays but I would like to understand why.


#2

Hi,

Ok so first remove the negative Z index. It's most of the time a bad idea, and in your case it's not needed.

Then, your logo is the background image of a div. If you want your logo to be contained, uncheck fixed

So now, if i guess good you want to horizontally center your div which contain your logo.
If you do this the way you've done this it will only work on the screen you see.
You can't center an element with px for a simple reason, nobody as the same resolution.

So we ll center it in %
The way to perfectly horizontally center an element in css is 50% left,

-50% transform move X.

This way it will stay perfectly center.
Notice, that in your case your dive is in a column, so it's center in the middle of your column.
If you want to center in the middle of your page, move your div from your column


#3

Xbrah.... ill give your run down a shot when I get home. I had the idea that divs have to be in column to keep it centered. Hence I put a column, conainer and a div inside that. All centered but had to do adjustments and got what i got in which is a unwanted moving logo. Just for learning purposes, how would you go about building this 1 home page. Its very simple. Just a static background image with that circle emblem in the center that has a clickable enter button. Should it just be the Body then just the div with the pic in its background and manually centered?


#4

Hey @cgmindd.
Personally i would redo everything.
So :

Add a new section called section background an give it 100vh and your background. (By the way, use jpeg for your background, png is way too heavy and not necessary in your case°.

In this section, drag a new div logo for your logo, 200px X 200px and put your logo inside.

Now to center your div :slight_smile:

The old school way :

Relative Top + left 50%, transform moove x and y -50%.

The new school but controversial way : Flexbox on the parent element (section background here)

Maybe rename the topic name please since it's about centering now :slight_smile:
Hope it will help,


#5

oh man! thxs zbrah! Ill redo it like you posted right now.


#6

zbrah.... it worked like a charm! All the devices are consistent! THANKS a millon! Learned so much from your post alone!


#7

Hey @cgmindd,

Great :slight_smile:
Can you please check the little solved box so the topic can be closed ?

Thanks,


#8