Thread Tools Display Modes
  #1  
Old 06-11-2019, 04:33 AM
TRIFI Vorrat's Avatar
TRIFI Vorrat is offline
 
Join Date: Jun 2019
Posts: 2
Default

Single Product Widget: strictly align left


Hi!

I am using the single product widget aka "Buy Now Button" on my website and I need the elements inside the widget to be strictly aligned left (so that everything fits with the rest of the page).
When I use the code as-is, it seems like the elements are not left-aligned at all, but actually center-aligned - even though I did not check the center-horizontally option.

I have tried to inspect the elements inside the widget with Google Chrome and I tried both "float:left" and "margin-left: 0px" as well as "margin-left: -30px" (and other numbers), but it either doesn't work at all or the elements are not exactly aligned.

I would really really appreciate some help with this, as I'm out of ideas right now. There must be some easy way to achieve this, as left-aligned is usually the default anyway (afaik).

I only use "options", "quantity selection" and the "buy now button" - no image, no price or anything else - so I would only need the CSS code for those 3 things.
I hope someone around here knows how to get this working Thanks in advance!
  #2  
Old 06-14-2019, 03:02 AM
Jesse Melchior's Avatar
Jesse Melchior Jesse Melchior is offline
 
Join Date: Jun 2019
Posts: 2
Default

Im actually trying to do the same thing, except to have it align to the right side of the page, and possibly position it lower that it is. Hopefully someone here can help.
  #3  
Old 06-19-2019, 03:42 PM
Una Q's Avatar
Una Q Una Q is offline
Ecwid Team
 
Join Date: Nov 2016
Posts: 151
Default

Quote:
Originally Posted by TRIFI Vorrat View Post
Hi!

I am using the single product widget aka "Buy Now Button" on my website and I need the elements inside the widget to be strictly aligned left (so that everything fits with the rest of the page).
When I use the code as-is, it seems like the elements are not left-aligned at all, but actually center-aligned - even though I did not check the center-horizontally option.

I have tried to inspect the elements inside the widget with Google Chrome and I tried both "float:left" and "margin-left: 0px" as well as "margin-left: -30px" (and other numbers), but it either doesn't work at all or the elements are not exactly aligned.

I would really really appreciate some help with this, as I'm out of ideas right now. There must be some easy way to achieve this, as left-aligned is usually the default anyway (afaik).

I only use "options", "quantity selection" and the "buy now button" - no image, no price or anything else - so I would only need the CSS code for those 3 things.
I hope someone around here knows how to get this working Thanks in advance!
Hello!

This is Una from Ecwid Team. Thank you for reaching out to us!

I see that you also contacted us via email and our agent provided you with the right CSS code. If you have any further questions, please feel free to write us back.

Thanks!

Best regards,
Una Q.
Ecwid Support Team
  #4  
Old 06-19-2019, 03:53 PM
Una Q's Avatar
Una Q Una Q is offline
Ecwid Team
 
Join Date: Nov 2016
Posts: 151
Default

Quote:
Originally Posted by Jesse Melchior View Post
Im actually trying to do the same thing, except to have it align to the right side of the page, and possibly position it lower that it is. Hopefully someone here can help.
Hello Jesse!

This is Una from Ecwid Customer Care team. Thanks for your message!

If you want the Buy Now button and product options for the single product widget to be aligned right and bottom, please use this CSS code:

Code:
.ecwid.ecwid-SingleProduct-v2 {
    text-align: right;

}

.ecwid.ecwid-SingleProduct-v2 .ecwid-SingleProduct-options {
    padding-right: 3px;
    margin-right: 3px; 
    max-width: 205px;
    margin-top: 100px
}

.ecwid.ecwid-SingleProduct-v2 button.ecwid-btn.ecwid-btn--primary.ecwid-btn--addToBag  {margin-right: 5px;}
To make it work, please go to your Ecwid control panel->Design->Edit Theme, add the code there and save the changes. You can change the padding-right, margin-right, max-width and margin-top values to achieve the best results.

I hope this helps! If you have any other questions or need assistance with anything else, please feel free to reach out to us via this contact form: https://support.ecwid.com/hc/en-us/requests/new We will be happy to assist!

Best regards,
Una Q.
Ecwid Support Team
  #5  
Old 06-20-2019, 12:04 AM
Jesse Melchior's Avatar
Jesse Melchior Jesse Melchior is offline
 
Join Date: Jun 2019
Posts: 2
Default

Thank you so much!
  #6  
Old 06-02-2020, 03:58 AM
ArchMaple's Avatar
ArchMaple ArchMaple is offline
Junior Member
 
Join Date: May 2020
Posts: 3
Default

I have tried to inspect the elements inside the widget with Google Chrome and I tried both "float:left" and "margin-left: 0px" as well as "margin-left: -30px" (and other numbers), but it either doesn't work at all or the elements are not exactly aligned.
 

Tags
align, buy now button, css, left align, single product widget

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:38 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.