![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: horizontal gallery
-
AuthorPosts
-
January 21, 2019 at 10:22 pm #1056897
Hello!
So I have been struggling with this for a while now and need some help. I’ve managed to post the caption of images over each of the entries in the Horizontal Gallery and change the view for mobile through CSS. The problem I am facing now is that the caption raises to the upper middle of the image when an mobile mode. Would it be possible to adjust the text either through PHP or CSS to accommodate the change to mobile? Ideally the change would occur while resizing so perhaps CSS would be the best option?
Here is the PHP code I have so far. I can’t get the small screen size portion to work properly:
/* Added to add horizontal gallery text on home page */ function horizontal_gallery_subline(){ ?> <script> (function($){ $(window).load(function() { $('.av-horizontal-gallery-link').css('bottom', '30px'); $('.av-horizontal-gallery-link').each(function(){ var imgTitle = $(this).attr('title'); $(this).after('<div style=""><p class="text-under-image">' + imgTitle + '</p></div>'); $(this).css({ 'padding-bottom' : '20px', 'background-color' : 'transparent', }); if($(window).height() < 550) $('.text-under-image').css({ "text-align": "center", "margin-left": "auto", "margin-right": "auto", "width": "290px", "color": "rgb(255, 255, 255)", "position": "relative", "background": "#001a35", "opacity": "0.9", "top": "-20px", "padding": "10px", "line-height": "130%", }); else $('.text-under-image').css({ "text-align": "center", "margin-left": "auto", "margin-right": "auto", "width": "290px", "color": "rgb(255, 255, 255)", "position": "relative", "background": "#001a35", "opacity": "0.9", "top": "-140px", "padding": "10px", "line-height": "130%", }); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'horizontal_gallery_subline');
Here is my CSS. The ‘homecarousel’ portion is what I named the CSS class as I have multiple galleries and this one needs specific changes:
/* Add wrap to the text inside of the home page carousel */ .homecarousel .av-horizontal-gallery-inner { white-space: normal !important; } /* Settings to fix image placement of home page carousel on mobile */ @media only screen and (max-width: 989px) { .responsive .av-horizontal-gallery-inner { position: static; min-height: 500px; } } /* NOT WORKING */ /* Settings to fix text placement of home page carousel on mobile */ @media only screen and (max-width: 989px) { .responsive .av-horizontal-gallery-inner .text-under-image { top: -20px; } }
Any help would be greatly appreciated!
January 22, 2019 at 1:48 pm #1057190Hey lssu,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaJanuary 22, 2019 at 3:05 pm #1057244This reply has been marked as private.January 22, 2019 at 7:27 pm #1057402Hi lssu,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 479px) { .responsive .av-horizontal-gallery-inner .text-under-image { top: -60px !important; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .responsive .av-horizontal-gallery-inner .text-under-image { top: -90px !important; } } @media only screen and (min-width: 768px) and (max-width: 989px){ .responsive .av-horizontal-gallery-inner .text-under-image { top: -150px !important; } }
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.