diff --git a/README.md b/README.md
index 2bca36e..ec8164e 100644
--- a/README.md
+++ b/README.md
@@ -218,10 +218,19 @@ To workaround it, it's required to anchor the width to an external element that
 
 ```js
 config.blocks.blocksConfig.slider = {
-  referenceContainerQuery: '.container .header',
+  referenceContainerQuery: 'body.has-sidebar .container .header',
 };
 ```
 
+This fix has an option to adjust this width given a fixed value of pixels via a CSS custom property called `--slider-block-edit-width-adjustment`.
+So you can add it in your custom theme, as follows:
+
+```css
+:root {
+  --slider-block-edit-adjustment: 40px;
+}
+```
+
 # Credits
 
 <img alt="Forschungszentrum Jülich" src="https://github.com/kitconcept/volto-slider-block/raw/master/fz-juelich.svg" width="200px" />
diff --git a/news/29.feature b/news/29.feature
new file mode 100644
index 0000000..a55fadf
--- /dev/null
+++ b/news/29.feature
@@ -0,0 +1 @@
+Add adjustment option for the width of the slider container via CSS custom property. @sneridagh
diff --git a/src/helpers/SlidesWidthFix/SlidesWidthFix.jsx b/src/helpers/SlidesWidthFix/SlidesWidthFix.jsx
index bb090a7..bde871d 100644
--- a/src/helpers/SlidesWidthFix/SlidesWidthFix.jsx
+++ b/src/helpers/SlidesWidthFix/SlidesWidthFix.jsx
@@ -8,7 +8,7 @@ export const SlidesWidthFix = ({ width }) => {
       {`
 #page-add .block.slider .slick-slider,
 #page-edit .block.slider .slick-slider {
-width: ${width}px !important;
+width: calc(${width}px - var(slider-block-edit-width-adjustment, 0px)) !important;
 max-width: 1440px !important;
 }`}
     </style>