The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 09-11-2015, 01:25 PM
Your4Walls's Avatar
Your4Walls is offline
Webpartner
 
Join Date: Feb 2015
Posts: 23
Default

Adjust how close to edge of browser the product details box is


http://your4walls.businesscatalyst.c...egory=14407584

Is there a way of adjusting how close the product details box is to the browser please?
  #2  
Old 09-23-2015, 08:39 AM
Stanley Jr's Avatar
Stanley Jr Stanley Jr is offline
Ecwid Team
 
Join Date: Aug 2015
Posts: 133
Default

Quote:
Originally Posted by Nikki Barlow View Post
http://your4walls.businesscatalyst.c...egory=14407584

Is there a way of adjusting how close the product details box is to the browser please?
Hello,

Thanks for contacting us.

I have examined your website and I see that such position of Ecwid Product Browser (which stands so close to the web browser’s right edge) is defined by the rules in your website’s CSS themes. I see that you have two CSS themes in your website which affect the design of your store, so to change the position of Ecwid Product Browser, change the existing rules or add new ones to these themes. For example, if you delete the rule “position: absolute” from the code below
Code:
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-details-rightPanel {
    z-index: 1;
    background-color: rgba(177,177,177,1.00);
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
    box-sizing: border-box;
    position: absolute;
    right: 0px
}
the right panel and the product image will move to the left and the right panel will not stand so close to the right edge.

Basically, to change the design of your Ecwid store, you should add CSS rules to your store CSS Theme: Control panel > Settings > Design > CSS Themes > your active CSS Theme. Please, refer to this article to know more on how to change Ecwid store design: https://help.ecwid.com/customer/portal/articles/1083332

Alternatively, Product Browser position can be changed by adding the following code to your active Ecwid CSS Theme:
Code:
.ecwid-productBrowser-ProductPage .ecwid-productBrowser-details-rightPanel {
	margin-right: 30px !important;
}
This CSS code creates a margin on the right side of the Product Browser. Change the number of pixels in the code to make the margin wider or narrower. Please note that this code contains “!important” declaration, which adds more weight to this rule and thus all other similar rules for this class will be ignored. That is why I would rather recommend you to examine your website CSS Themes first to see which rules there affect the position of the right panel.

Should you have any questions left, please be free to write back.
__________________
Stanley
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

:arrow_down: Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, details, product

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 05:51 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.