Mobile view – .form.form-cart always visible

Hi there,

The CSS in this gist should do just that.
https://gist.github.com/marcusig/0f4e9df7b4bd256bc0a053bbcf89daca

You might need to do a few adjustments depending on your theme.

Best,
Marc

• This reply was modified 3 years, 5 months ago by Marc Lacroix.

Thanks Marc. Any chance you’ve copied the wrong url? 404

• This reply was modified 3 years, 5 months ago by Wohoo123.

Yes sorry, I obviously added a “v” at the end when pasting: https://gist.github.com/marcusig/0f4e9df7b4bd256bc0a053bbcf89daca

Thanks.

I want .mkl_pc_toolbar to auto adjust its size based on the content in it. Is this possible? Right now if there are a lot of options to choose from, the user needs to scroll in .mkl_pc_toolbar.

Does it makes sense what I’m saying?

This was my code:

@media (max-width: 660px){
.mkl_pc .mkl_pc_container footer .form.form-cart {
position: absolute;
bottom: -165%;
}
.mkl_pc .mkl_pc_container footer {
border-top: none;
}
.mkl_pc .mkl_pc_container .mkl-pc-show-form {
display: none;
}
body.configurator_is_inline .mkl_pc {
min-height: 900px;
}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar {
bottom: 210px;
}
.mkl_pc .mkl_pc_container footer {
text-align: center;
height: 207px;
}
.mkl_pc .mkl_pc_container footer .form.form-cart {
position: absolute;
bottom: 0px;
}
}`

It’s hard to say without the context. Can you share a link to your product?

It runs on a local environment so unfortunately not.

https://postimg.cc/4npbh6BN

This section should increase and decrease automatically based on the different options. Right now I should scroll in this section to see the 4th layer.

Okay.
So it’s possible, but you’ll have to change quite a bit of CSS. At the moment, most parts use position: absolute;. So in order for the toolbar to adapt to its content, you’ll have to change everything (almost) to use relative positioning instead.

Thanks for your help Marc. I’ll do my best. But doesn’t look like a quick fix.

@marcusig found the solution:
This code did the trick.

@media (max-width: 660px) {
.mkl_pc .mkl_pc_container .mkl_pc_toolbar {
    position: relative;
  	}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices {
    position: relative;
}
.mkl_pc .mkl_pc_container footer {
    display: none;
  }
  .mkl_pc .mkl_pc_container .mkl_pc_toolbar .form.form-cart {
    display:block;
  }
}

Wohoo123, hi there,

How did you make such a beautiful footer with the price, quantity and “Add to cart” button? Can you share CSS?

`It runs on a local environment so unfortunately not.

https://postimg.cc/4npbh6BN

This section should increase and decrease automatically based on the different options. Right now I should scroll in this section to see the 4th layer.`

• This reply was modified 3 years ago by zzsnowballzz.