Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 10, 2019 at 10:19 pm #1117612
    oscar_andrade

    Hello everyone, I am trying to adjust size or position of the add to cart widget. It is too wide for a 1/4 column on variable products. is there a way to adjust this?
    The select variable, the plus sign and the button gets cut.

    Thanks in advance

    July 11, 2019 at 8:13 am #1117706
    Rikard

    Hey oscar_andrade,

    Please try the following in Quick CSS under Enfold->General Styling:

    .single_variation_wrap {
    margin: 10px 0px 20px 35px !important;
}

    Best regards,
    Rikard

    July 12, 2019 at 2:30 am #1117904
    oscar_andrade

    That worked great!
    Thank you Rikard for the wonderful support you guys have.

    Can I add one last question here, now that the variable products add to cart widget looks great, my regular add to cart for simple products is not centered, how can I control that?

    July 12, 2019 at 8:35 am #1117969
    Rikard

    Hi,

    Thanks for the update. Please try this CSS instead of what I previously posted:

    .av-woo-purchase-button .single_variation_wrap {
    margin: 10px 0px 20px 35px !important;
}

    Best regards,
    Rikard

    July 12, 2019 at 4:51 pm #1118130
    oscar_andrade

    Thank you Rikard
    No change with that code

    July 12, 2019 at 10:26 pm #1118217
    Victoria

    Hi oscar_andrade,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    July 13, 2019 at 2:23 pm #1118315
    oscar_andrade

    Sure
    You can see on the link that the widget gets cut, that is a view from an iPad.
    With the code Rikard sent it looks great on a laptop.

    July 13, 2019 at 3:24 pm #1118338
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
.flex_column.av_one_fourth.flex_column_div.avia-builder-el-7{
width: 240px!important;
margin-left:2%!important
}}

    Best regards,
    Jordan Shannon

    July 14, 2019 at 4:29 am #1118431
    oscar_andrade

    I have the following CSS code:

    .av-woo-purchase-button .single_variation_wrap {
    margin: 10px 0px 20px 35px !important;
    }

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    .flex_column.av_one_fourth.flex_column_div.avia-builder-el-7{
    width: 240px!important;
    margin-left:2%!important
    }}

    But still have the issue on small screens, iPad and iPhone

    July 15, 2019 at 3:12 am #1118653
    Ismael

    Hi,

    Thanks for the update.

    You should probably set the Screen Options > Full Width Breakpoint to the second option (On tablets (at a screen width of 989px or lower) in order to create more space for the add to cart buttons. This will force the columns to stack on top of each other on tablet view.

    Best regards,
    Ismael

    July 15, 2019 at 4:57 pm #1118868
    oscar_andrade

    Thanks Ismael,
    You mean at the column or color section level? it only shows hide on…

    July 17, 2019 at 7:49 am #1119433
    Ismael

    Hi,

    it only shows hide on…

    You have to edit the first column in the row. Look for the Full Width Breakpoint in the Screen Options panel. Let us know if that helps.

    Thank you for the update.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.