Some styling questions

http://www.websterhoney.com/

1. On the homepage, the 2 buttons look fine on a full desktop size screen. But when scaling down to ~Macbook/Laptop resolution they just overlap each other or snap to the edge as currently they are right and left aligned which only works on a full-screen desktop resolution. I have tried a bunch of different methods with wraps/padding and nothing has worked, the only time it does work when resizing is when they are centred and end up being too far apart. Currently, 1st is right aligned 2nd is left aligned. Any fix?

2. Every time I upload a video background for the landing page it puts this weird very faint dotted pattern/black overlay on it? Tried multiple formats, although the same thing has happened.

3. Is there no way to style individual buttons? I would like the right one to be an outline, then filled on hover.

4. Can't seem to increase the scale of the chart, would like it to be as tall as the icon list to the right of it.

5. Testimonial - Can't seem to change the arrows to white outlines rather than the white box grey outline, also the orange dots above the quote author need to be white.

Thanks,

Kyle


Comments

  • Any help at all guys?
  • Hi,
    sorry we lost you there:)

    1. Well, you cannot really do anything about it. They columns will be full width after they change resolution and they get aligned. You could only align them center.
    2. You can use this css to fix it
    .section.has-video .section_video .mask {
    background:none !important;
    }
    3. If you insert the buttons via muffin builder then you can only change the colors but not the style which is global in theme options>global>general
    4. Sorry there is no option for that, even with css
    5. Those dots can be changed in theme options>colors>shortcodes
    The arrows color can be changed with this css
    .testimonials_slider_ul a {
    background:transparent !important;
    }
    .testimonials_slider_ul a span {
    border:1px solid black !important;
    }
    thanks
  • Thank you!

    Shame about the chart, would be cool to have scaling ability in future.

    For the arrows, I meant I wanted just the arrows in white, no outline/background around the arrows. Just white arrows on their own, can I do that?

    I also tried every single option in theme options>colors>shortcodes and none of them changed the dots to white?

    Thanks
  • The dots are actually theme color, you can change that in theme options>colors>content.

    If you do not want the border, then just use this css:
    .testimonials_slider_ul a {
    background:transparent !important;
    }

  • Thanks that fixed the dots.

    Although for the arrows I was asking if I could make the actual arrows white? That CSS took away the border although the arrows are still grey which you can see on the site.

    Can't find a way to change it anywhere in options so I assume there is some CSS for this also?

    Thanks
  • .testimonials_slider_ul a i {
    color: #fff !important;
    }

    This should help.
  • That's fixed it, thanks!
Sign In or Register to comment.