0

I have a template page I have created for WordPress the page is a DIV that has the following CSS applied to it;

.page-width {
     max-width: 1170px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 25px;
     padding-right: 25px;
     border: 1px solid #eee;
     border-top: none;
}

The WordPress content is outputted to that DIV. I am using a page builder to create a slider at the top of the page, but I want there to be no gap between the top of the slider and the horizontal menu and to the sides of the slider so I have used this code;

.page-width .widget_sow-slider {
    margin-left: -25px;
    margin-right: -25px;
    margin-top: -25px;
}

This looks almost perfect except that there is a 1px border to the left/right of the slider which is noticeable. Is there a way to remove the border at that point or have the slider overlap it by 1px either side.

UPDATE:

The HTML looks like this;

<div class="page-width">

   <div class="widget_wow_slider;">
   .. slider..
   </div>

</div>
Naz
  • 900
  • 2
  • 10
  • 25

1 Answers1

0

Without seeing the website and being able to inspect the code I would suggest the following:

Is it possible to increase the width of the slider by 2px?

Is your slider inside the .page-width element? If so you have applied a 1px border to that element which is the culprit here.

Try adjusting the styles to the following:

.page-width {
 max-width: 1170px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 25px;
 padding-right: 25px;
 border-bottom: 1px solid #eee;

}

j_quelly
  • 1,399
  • 4
  • 16
  • 37
  • The slider is within the .page-width so it will inherit the left/right border, the code you provide removes the left/right border but I want that, but just not for the slider. – Naz Mar 29 '16 at 16:29
  • Have you tried setting the slider's styles to border: none !important; ? – j_quelly Mar 29 '16 at 16:35
  • Are you sure the border that you're seeing is not caused by the parent container? .page-width {} If the slider has the appearance of a border on either side and it's parent has a border applied. The slider will not "inherit" the border as you say. It's the the parent that has the border wrapped around it. Perhaps you should remove the border from page-width {} and instead use box-sizing: border-box; to make an inner border. And if you want the slider to overlap the border you can perhaps adjust the z-index. It's difficult for me to guess what you're after without seeing a working example. – j_quelly Mar 29 '16 at 16:43
  • Yes it is caused by the parent container. The slider is within that flush to the sides. – Naz Mar 29 '16 at 16:52
  • So then adjust the parent container as I've suggested -- see more here: http://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge This will make the appearance that your slider overlaps the border. – j_quelly Mar 29 '16 at 16:56