Resizing the window voids "center screen's content."

Claire shared this question 4 years ago
Answered

I have the screen set to "center screen's content." I also have a couple of rectangles that are 100% relative to the parent container width when I resize the window. On first load, everything looks as it should, but when I resize the window, all of my content justifies itself on the left side.

Comments (9)

photo
1

Are the rectangles offset from the left edge of the canvas?


By this I mean when you work with the elements and not when you preview them.


In any case I can't confirm what you report.


I tried to do as you say and when they were offset from left they still didn't justify to left in preview.


Sorry. I wonder what we do differently?

photo
1

I'm not exactly sure what offset means. The screen size is 1080 x 720 and is a vertical scroll. The rectangles are also 1080 x 720 and set at (0,1080), (0,3240), etc. I have the rectangles set to stretch horizontally to match the window size when the window is resized, and this apparently makes all of the content align to the left instead of the center. I can't fit everything in the screenshot, but the lighter gray is the background color and the darker gray is the rectangle I placed. 8b0c491a66cd14821193b536f1f39d0f


Thanks for responding.

photo
1

Hi Claire,


this part of your text I cannot understand "The rectangles are also 1080 x 720 and set at (0,1080), (0,3240)".


Is (0,1080) same as X=0, Y=1080?

photo
1

Yeah that's an x,y coordinate. I added that info because I didn't know what you meant by "offset from the left edge of the canvas."

photo
1

Ok, then I think this is clear to me.


If you set them 100% width, then that is what you get. They fill the entire width of the browser window.


What I don't understand is when you say that initially they don't span across the window. That is odd.

photo
1

It's because it only fills the window after the window's resized. I tried to get it to do it when the page loads, but it didn't work. What I don't understand is why resizing will cause my content to align on the left.

photo
1

I don't think your content aligns to left per se, but it fills the entire horizontal space because you have set it to 100% width to the parent.


So what happens is, your content is aligned to the center of the window (by Center screen's content) but you never really see this happen because the moment you resize your window the content takes over the whole horizontal space.


To see the page centering in effect - assign the content to 80% width.


Try that and you will see.

photo
1

That does fix the issue of the centering. Thank you. However, now the rectangles don't span all the way across the screen. I may have to come up with a different solution. Is there a way to lock scrolling so it only scrolls vertically? I want the background color to alternate, and the only way I know how to do this is by adding large rectangles of a second color. The only other solution I can think of is to make the rectangles really wide, but I don't want people to be able to scroll horizontally. I don't know if I'm making sense. Thanks for sticking with me as long as you have.

photo
1

Ok so good news. I figured out a workaround. I made a long png the length of my site with the alternating colors. Then on the home screen, I chose to add an image to the background and loaded my png. Then I tiled it to the right. Works perfectly and doesn't mess up my centering or create a horizontal scroll. Thanks for your help!