Naomi777 Posted June 25, 2014 Share Posted June 25, 2014 I can't find the answer! I've already tried image block caption CSS workarounds. I can't find one specifically for video blocks. RIght now, the caption that shows up (beneath the video) is so tiny that it's very difficult to read. This font category doesn't seem to be listed in the DIY Edits panel either. Please help! Naomi Link to comment
dannyvaritek Posted June 25, 2014 Share Posted June 25, 2014 I would add this to your Page Settings: <style> .collection-xxxxxxx .video-caption { font-size: 2em;}</style> You see above that I have the font size set to "2em". One "em" value is the standard font size for your page. If you have your page font size set to 12pt, then 1em = 12pt; thus, 2em = 24pt, and .5em = 6pt. So, 2em is a drastic increase. I'd gradually raise your font size from 1.2em to 1.4em, etc. to see what looks best on your site. I tested this out on my page, and it works perfectly. Up above, the .collection-xxxxxxx should be filled in with your page's collection ID. However, when I set this up on my site, the text rammed right into my video player, with no space in between (which isn't exactly pretty). So I added this to my custom CSS: padding-top: 5px; So, all in all, my code looked like this: <style> .collection-xxxxxxx .video-caption { font-size: 2em; padding-top:5px;}</style> Hope this wasn't too confusing. There's always a chance this won't work with your page. I was experimenting on the Marquee Template. Link to comment
Naomi777 Posted June 25, 2014 Author Share Posted June 25, 2014 Wow thanks for the reply dannyvaritek! Can you please tell me where I'd find this page collection ID? Thanks! Link to comment
dannyvaritek Posted June 25, 2014 Share Posted June 25, 2014 You'll find your collection ID in the URL while you're on the page editor for the page that you want this code to effect. My URL is "varsaire.squarespace.com/config/#module=content&collectionId=53a8dceee4b0cd8d798f54f0", and my collection ID is "53a8dceee4b0cd8d798f54f0". So you see that it's that last string of characters in the URL. Link to comment
dannyvaritek Posted June 25, 2014 Share Posted June 25, 2014 Also know that the padding-top snippet that I added in may not be necessary, so you might want to remove it -- depending on what looks best on your website. Link to comment
merchako Posted April 30, 2016 Share Posted April 30, 2016 This answer doesn't work for me because my Marquee template has font-size hard-coded as inline CSS, so adding custom CSS code has no effect. <span style="font-size: 13px; @media">video caption text</span> I don't see any way to get around inline CSS. Do you? Link to comment
merchako Posted April 30, 2016 Share Posted April 30, 2016 /* caption font size on videos */ .video-caption * { font-size: 1em !important; /* the inline styles on video captions will win if we don't make this important */ padding-top: 5px; } Drop this in Design > Custom CSS. @dannyvaritek's answer is a little more complicated than this needs to be. You don't need to specify the collection if you're comfortable with this applying to all video captions. On my instance of Marquee, the video captions look too small because there's inline CSS sizing the font to 13px. We can override the inline with !important . By re-pegging the caption size to page's font size, you'll can get a more reasonably-sized fonts, especially on mobile devices (which is where I noticed the problem). Vary 1em from .7em - 1.2em to fit your taste. The padding-top statement is there because @dannyvaritek was kinda right about that. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.