-
Posts
-
Dear Support-Team,
first I want to thank you for this awesome theme. I love it.
With one of my projects I have some problems with the caption on images, it seems that this feature isn´t really responsive. On tablets and smaller screens, the text is cut off on the right side, it isn`t centered anymore and the font size is still the same as on the desktop version.
Can you help me and fix this problem?
Is it even possible to hide the text on hover and decrease the line space for the caption?
Kind regards
RicardaHey networknow,
Thank you for the kind words :)
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.av-image-caption-overlay p { font-size: 18px; line-height: 20px; }Best regards,
VinayHi Vinay,
thank you for this tip, but it doesn´t solve the responsive problem. Font and line height are reduced now, but on my IPad, the text isn´t centered yet, there is still too much padding on the left
For the desktop version now the the font size is too small.
And there ist still the question, if it´s possible to fade out the text on hover (mouse rollover).Any ideas?
kind regards
Ricarda
Hi,
Please try the following CSS as well:
@media only screen and (max-width: 990px) { .av-image-caption-overlay-center { padding: 0px 5px !important; } }Regards,
RikardThanx a lot, it works.
Is it possible to change the Font Size and line height only for the tablet version?And there is still the question, if it´s possible to fade out the text on hover (mouse rollover)?
best regards again
Ricarda
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 1024px) and (min-width: 767px) { .av-image-caption-overlay-center p { font-size: 16px; line-height: 14px; }} .avia-image-container.avia-align-center:hover .av-image-caption-overlay-center p { opacity: 0!important; }Best regards,
YigitHi Enfold Support,
Thanks for all your help with enfold theme support. You’re what makes this theme so popular. Regarding image caption text being response… is there a way to have the text fit the area of the image regardless of the screen size? You’ve added the responsive feature for other elements (example: special headers) but with image caption overlays you have to use media queries for pretty much each screen size. Is there a way to have the font size adjust to always fit within the text overlay container and never be too big or small for the image area without media queries?
Thanks again for all your great work.
Best,
EricHi Eric,
Thanks for the kind words. I’m not sure I understand what you are looking to achieve though, could you link to an example of where this already exists maybe? Or do you have a mockup/screenshot highlighting your intentions?
Best regards,
RikardHi Rikard,
My apologies. I fixed a typo in my original post and clarified a couple things. I also included the page where the image caption text overlay issue appears (private area). You’ll note in the custom css below that we had to create media queries for each break point so the text would fit well at different screen sizes. Now that I think of it, this may be a feature request for future theme updates. :) But if there’s an easier way to have the overlay text fit well at each screen size, please share. Thanks!
Eric@media only screen and (min-width: 768px) and (max-width: 788px) {
.av-image-caption-overlay-center p {
font-size: 12px;
line-height: 1em;
}}
@media only screen and (min-width: 789px) and (max-width: 906px) {
.av-image-caption-overlay-center p {
font-size: 13px;
line-height: 1em;
}}
@media only screen and (min-width: 907px) and (max-width: 1023px) {
.av-image-caption-overlay-center p {
font-size: 14px;
line-height: 1.2em;
}}
@media only screen and (min-width: 1024px) and (max-width: 1073px) {
.av-image-caption-overlay-center p {
font-size: 15px;
line-height: 1.2em;
}}
@media only screen and (min-width: 1074px) and (max-width: 1287px) {
.av-image-caption-overlay-center p {
font-size: 16px;
line-height: 1.2em;
}}
- You must be logged in to reply to this topic.