Home>Support>Flex Slider arrows on mobile

Flex Slider arrows on mobile

By wiredpoet, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hiya,
Here’s a screenshot from my iPhone (looks the same on ipad, too)
http://screencast.com/t/fFEGH0nfHJ

If I click on my slider on ipad or iphone, the black arrows come up but are sized all wonky. How can I fix this? Or choose to not show arrows on mobile?

Also, I had to adjust the mobile resolution to 780px cause I couldn’t figure out how else to get my header from looking weird on ipad:
http://screencast.com/t/LpsHvwEj
this is what it looked like before I made the change:
http://screencast.com/t/6iI5UxTTXj

Is there a better way to do this? Does this have anything to do with the arrows showing up?

Thanks again for all the help! Am loving this theme, just have these little tweaks to make before I can populate my pages and go live!

URL: http://caritaylor.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi wiredpoet

    Apologies for the hassle. This is a Retina issue. We have it fixed in Vantage 2.2.4. That update is going through some internal testing at the moment, we’ll push it live as soon as possible.

    You’ve done the right thing to resolve the header cross over. You just need to grab that entire block and put it in Custom CSS:

    /* Vantage Header Responsive Breakpoint */

@media (max-width: 960px) {
  body.responsive header#masthead .hgroup {
    text-align: center;
  }
  body.responsive header#masthead .hgroup .logo {
    float: none;
  }
  body.responsive header#masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive header#masthead .hgroup .support-text,
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive header#masthead .hgroup .support-text img,
  body.responsive header#masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
}
  2. 9 years, 7 months ago wiredpoet

    The code above doesn’t match the code I have in my css file–should I leave the code in the theme css alone and then just use what you’ve put above in the custom css?

    Thanks ;)
    C

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Sure, give what I sent a try in Custom CSS.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More