Hi all!
i was struggling to make a website components stay at the middle with variety of margin, for example in 1001px until 1156px resolution, it has 50px margin and the margin slowly increasing until it hits 1300px, and then at 1301px and higher resolution, the margin stays at 300px
Is there any tutorial on this? or anyone had a solution? im struggling what keyword to type in google search.
Im really sorry for my bad english, i send a gif below that hopefully making it easier to understand
https://i.gyazo.com/16be7015582dc73e07c78833bbdf93ad.gif
thank you in advance!
Hi, @yanuarcahyatriputra . There are quite a few specifics about your situation that will affect how best to do this. For example, do you want the centered object to remain a fixed size, or do you want it to shrink and grow as the viewport changes? Do you want margins to be fixed, as you’ve mentioned, or can the margins shrink and grow?
Without knowing those things, let me just throw out one option. In this case, I’ve got a grid where I’ve fixed the dimensions of the center cell (800 px wide, 649 tall) and allowed all the margins to shrink and grow (1 fraction for each).
The result is a fixed-size container at the center of my page, which remains in the center as the viewport changes size. (Of course, I use different dimensions for the central cell in different viewports – this is the desktop view I’m showing).
Does this help? Or are you looking for a solution that doesn’t fix the size of the centered object?
@yanuarcahyatriputra Did this answer your question?
Hi @jim75924 im so sorry for the long respond, yes it worked! i set the container in the middle to be fixed and it worked! thank you so much!
