22 replies

Help with centering absolute positioned item

Hello! I am trying to position the form in the first picture to the one in the second picture while keeping things responsive.
transform: translateX(50%) works, but it is not responsive. Appreciate any help ^

Current Layout Code:

.hero {
  position: relative;
}
.form{
    @include m.mq(medium) {
        bottom: 0;
        width: min-content;
        margin: auto;
        position: absolute;
        display: flex;
        transform: translateY(50%);
    }

.hero {
  position: relative;
}
.form{
    @include m.mq(medium) {
        bottom: 0;
        width: min-content;
        margin: auto;
        position: absolute;
        display: flex;
        transform: translateY(50%);
    }

.hero {
  position: relative;
}
.form{
    @include m.mq(medium) {
        bottom: 0;
        width: min-content;
        margin: auto;
        position: absolute;
        display: flex;
        transform: translateY(50%);
    }

.hero {
  position: relative;
}
.form{
    @include m.mq(medium) {
        bottom: 0;
        width: min-content;
        margin: auto;
        position: absolute;
        display: flex;
        transform: translateY(50%);
    }

Help with centering absolute positioned item

Similar Threads

Similar Threads

Similar Threads