Quote:
Originally Posted by Nikki Barlow
|
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.