Clasic Slider Margins and Shadows

Support
#1

Good afternoon,

If you will kindly scroll down my home page a bit, you will notice this section: https://prnt.sc/k43cxg. This was originally an image, but I replaced it with a slider and am now having some issues achieving the same style I had previously. I need to:

  1. Implement an 8% margin on the left of the slider, and 8% margin on the right.
  2. Remove shadow from only the bottom (section below seems to prevent this from being done with z-index).
  3. Contain images to slider - all have been cropped to same size.
  4. Remove odd tan margin at bottom (button should be anchored).

Thank you,
J

#2

Hello There,

Thanks for writing in!

1.) To implement the margin, please insert an inline css in the slider element settings:

2.) The border and the shadow has been applied in the column. Please click the column and find the “Design” tab for you to remove the shadow.

3.) Your images is cropped in the original files:
https://denverhighriseliving.com/wp-content/uploads/Featured-Detailed-Condo-Intel-Slide-Four-The-Edge-LoHi.png
https://denverhighriseliving.com/wp-content/uploads/Featured-Detailed-Condo-Intel-Slide-One-The-Edge-LoHi.png

It has been resized to fit within the column width.

4.) I am not sure where to find the tan margin. Could you please provide a screenshot?

Please let us know how it goes.

#3

Hello,

Please be thorough as a couple items were missed (no worries, though!).

Screenshot: https://prnt.sc/k460dk

  1. I had previously tried inline CSS (and tried yours in case I did something wrong, but hadn’t), but the slider and not the images within are what’s affected. An alternate method I tried was padding on teh column, but again that wasn’t affecting the whole slider. :frowning:
  2. The border and shadow are applied to the column because the slider element doesn’t have those settings. I was able to remove the bottom border in the column, but not the box shadow. As I mentioned in my previous post, I also can’t seem to fix this with the z-index.
  3. I see the images I recently cropped, but I’m not sure why the resizing is causing issues. The tan margin is visible in both the most recent and the original screenshots behind the “VIEW” button.

Thank you!
J

#4

Hi @weatherstone,

In this case, please share us your admin credentials so we could check closer the code that you have used and the changes that you have done.

Don’t forget to set it in a secure note.

Thanks.

#5

So sorry, I thought I had posted those. See below:

#6

Hi @weatherstone,

  1. Instead of margin, you can implement the padding in the column like what you did, wrapping the entire slider. Then apply the shadow in the slider instead of the column. This will create a similar effect to a margin. Plus, you shouldn’t apply the margin to a column since it has pre-defined margins for columns to make it responsive. Imagine a set of columns that are supposed to have 100% width, and you added 8% more, it will become 116% and it will overflow. Width should be 100% of the screenshot width or parent’s width.

  2. As related to #1, you should apply the shadow in the slider itself. You can convert that CSS as inline CSS and apply it to the classic slider. Like this

border-width: 1px 1px 0px 1px; border-style: solid solid solid solid; border-color: rgb(0,0,0) rgb(0,0,0) rgb(0,0,0) rgb(0,0,0); text-align: center; box-shadow: 0em 0.5em 1.5em 0em rgb(0,0,0);

I just tried that and it works.

Plus yes, the box-shadow applies to the entire box, you can’t remove the shadow from a specific side. There are other samples like from here https://stackoverflow.com/questions/14067358/remove-right-side-of-box-shadow. But other sides are greatly affected since you’ll be using a negative offset (pushing the other sides)

  1. That’s the background color and it’s actually transparent. It creates a greyish color due to box-shadow. The only way to make it disappear is to put your button as an overlay element of the slider. Hence, adding it within each slide instead of outside the slider.

Thanks!

#7

Hello,

  1. and 2. The code applied within the inline CSS appears to be working on the slider. However, is there a way to adjust the z-index? The shadow at the bottom of the slider really needs to be behind the section below.

  2. Could you provide any additional instructions on how to add the button into the slides as an overlay? Not totally sure what you mean by that.

#8

Hi there,

Try adding this to the Element CSS of the column that contains the slider:

$el {
    overflow: hidden;
}

Is it the white space below the image you are referring to? If so, please adding this code to the Global CSS:

.x-flexslider .x-slides img {
    margin-bottom: 0;
}

Hope this helps.

#9

This is the solution I was originally looking for. Thank you!

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.