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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.