Skip to content
OverviewSolutions
2
Comments
3
Somraj Mukherjee
@iamsomraj

All comments

  • BossArifSanjaya•20
    @BossArifSanjayaSubmitted over 1 year ago

    how do you set the container so that its position is centered horizontally and vertically? how to make the container to be responsive correctly?

    html, css, bootstrap

    2
    Somraj Mukherjee•100
    @iamsomrajPosted over 1 year ago

    Hi,

    To center a container both horizontally and vertically using flexbox in CSS, you can apply the following styles to the container:

    .container {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 100vh; /* Set the container height to the full viewport height for vertical centering */
}

    By using display: flex, the child elements inside the container will be automatically centered both horizontally and vertically.

    This approach centers the container's content regardless of screen size, making it responsive to various devices.

    I can see that you have used bootstrap. Personally, I would highly recommend using Tailwind. Let me know if you need any help.

    1
  • Somraj Mukherjee•100
    @iamsomrajPosted over 1 year ago

    Hey Nikko Edward, really liked the implementation of Framer Motion for those transitions and movement.😍 Also, your code has motivated me to switch to Next 13. Any resources / courses to learn everything about the new features that you recommend?

    0
  • Somraj Mukherjee•100
    @iamsomrajPosted over 1 year ago

    Hi jeansy42,

    Loved your implementation. Would suggest make the whole form visible within the viewport. Also, for the plan section, plan cards are increasing in height (UI Jumping) when Yearly is selected. Having a min height can fix it.

    I have done the same challenge myself, too. Please suggest some improvements too.

    Marked as helpful
    0