ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• January 15, 2015 at 1:48 pm #141720
  deejayhart

  Member

  Post count: 239

  Really odd – I have 11 videos as a portfolio which are listed in VIDEO. It works great on laptop but will not scroll more than four videos on Iphone. Why?

  Also, I have some amendement which means the caption is visible on iphone, but the darker ‘on state’ would look better with this – more legible. Can you tell me how to do this?

  Finally, in much the dame way, I would like darker ‘on state’ and caption to be the ‘off’ on laptop. In other words, mouseover will show just the image you see as ‘off’, before clicking. Makes sense? Literally just a reversal. Can you help here? Many thanks!

  January 15, 2015 at 2:23 pm #141732
  deejayhart

  Member

  Post count: 239

  This reply has been marked as private.
  January 15, 2015 at 2:53 pm #141746
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Try adding this to your custom css:

  ul.portfolio-items.filterable-items {
    height: auto;
  }

  And sorry, I’m not sure what you mean about the other question?

  – Kyle

  January 15, 2015 at 3:04 pm #141754
  deejayhart

  Member

  Post count: 239

  OK, let me explain. When you see the video thumbs, you see just the photo first. Mouseover adds an overlay and a caption. Let’s call that STATE TWO. I want to reverse this so that all 11 show STATE TWO and only show photo with no overlay or caption when you mouse over.

  Thus avoiding ‘mystery meat’ navigation. Similarly, I just want iPhone to show photo, overlay and caption. At the moment it shows photo with no overlay, and caption, but this makes the text unclear. Got me now? Ta!

  January 15, 2015 at 3:11 pm #141756
  deejayhart

  Member

  Post count: 239

  Thanks so much for the iphone issue CSS – fixed it! WHY IS THIS? Surely that is quite an important bug fix for Cardinal if a portfolio won’t work on iphone? Anyway, appreciated.

  Possible to also have a 1 pixel gap between items on all devices?

  January 15, 2015 at 3:14 pm #141762
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Great, no problem. I’m afraid not sorry, you either need to have the gutters (30px) enabled or no space at all

  – Kyle

  January 15, 2015 at 3:41 pm #141776
  deejayhart

  Member

  Post count: 239

  Absolutely no way to decrease gutter? It must be possible?

  Just the mouseover reversal remaining…

  January 15, 2015 at 3:52 pm #141783
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  .bold-design figure.animated-overlay figcaption {
    opacity: 1;
    transform: none;
  }
  .bold-design figure.animated-overlay:hover figcaption {
    opacity: 0;
    transform: scale(1, 1);
  }

  And I’m afraid not, the layout is made up of columns which have percentages for widths, if you were to add margins it would break the layout, unless you went through the css editing all of the grid widths

  – Kyle

  January 16, 2015 at 6:29 am #141912
  deejayhart

  Member

  Post count: 239

  Hi Kyle – this is perfect, except for three things.

  1) Is there a way to reduce overlay opacity in custom CSS?
  2) On iPhone, there is no overlay at all -= could you please check and tell me how to apply?
  3) Is there a way to make the main caoption (the song title) say, H3? It is rather small at the moment.

  Thanks – really good support.

  January 16, 2015 at 9:00 am #141934
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  1) Yes, this is in the Theme Options > General, look for ‘Hover Overlay Opacity’

  2) There’s no background because you have this in your custom css:

  @media only screen and (max-width: 767px) {
      .bold-design figure.animated-overlay figcaption {
          opacity: 1;
          background: transparent!important;
          -webkit-transform: scale(1, 1);
          -moz-transform: scale(1, 1);
          -ms-transform: scale(1, 1);
          -o-transform: scale(1, 1);
          transform: scale(1, 1);
      }
  }

  You’d need to remove that

  3) Add this:

  figcaption .thumb-info h4 {
    font-size: 24px;
  }

  – Kyle

  January 16, 2015 at 9:21 am #141942
  deejayhart

  Member

  Post count: 239

  Fantastic help – thanks. How to make font bold?

  January 16, 2015 at 9:27 am #141943
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add font weight to it:

  figcaption .thumb-info h4 {
    font-size: 24px;
    font-weight:bold;
  }

  – Kyle

  January 16, 2015 at 10:07 am #141954
  deejayhart

  Member

  Post count: 239

  That’s great – thanks 😉

  January 16, 2015 at 10:48 am #141971
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem 🙂

• Back to forum

  Posted in: Cardinal