i using carousel here: http://www.inventivewebdesign.com/studioartnouveau/gallery-2/
the carousel program using doesn't allow captions used following css add them have live text rather adding text image:
/* carousel */ .ult-carousel-wrapper { margin-bottom: 35px; position: relative; } .ult-item-wrap{padding-bottom:95px; } .ult-item-wrap a{font-size:28px; color:#b0964d; font-family: 'alex brush', cursive; word-wrap: break-word;} .ult-item-wrap a:hover{color:#333;} .ult-item-wrap img{margin-bottom:15px;} .sculpt-rest a::after{ content: "sculpture restoration";} .sculpt-comm a::after{ content: "sculpture commissions";} .consultation a::after{ content: "consultation fees"; } .artists a::after{ content: "meet artists";} .new-directions a::after{ content: "new directions";} .awards a::after{ content: "custom awards";} .paint-rest a::after{ content: "painting restoration";} @media screen , ( max-width:1280px ) { .ult-item-wrap a{font-size:13px; font-family:helvetica;} } the problem having screen size gets smaller words overlap rather going line below.
does know how make them go line below rather overlap?
here html:
<div class="ult-carousel-189751681554c36181c5d8 slick-initialized slick-slider"><div tabindex="0" aria-live="polite" class="slick-list draggable"><div style="opacity: 1; width: 4284px; transform: translate3d(-2016px, 0px, 0px); transition: transform 5000ms ease 0s;" class="slick-track"><div style="width: 192px;" aria-hidden="true" data-slick-index="-5" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element consultation"> <div class="wpb_wrapper"> <a href="/?page_id=15"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/consultation-services-png-72-dpi.png" class="attachment-full" alt="consultation fees" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-4" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element artists"> <div class="wpb_wrapper"> <a href="/?page_id=8"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/meet-the-artists-png-72-dpi.png" class="attachment-full" alt="meet artists - us" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-3" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element new-directions"> <div class="wpb_wrapper"> <a href="/?page_id=17"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/new-directions-png-72-dpi.png" class="attachment-full" alt="new directions" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-2" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element awards "> <div class="wpb_wrapper"> <a href="/?page_id=19"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/custom-awards-png-72-dpi.png" class="attachment-full" alt="custom awards" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-1" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element paint-rest"> <div class="wpb_wrapper"> <a href="/?page_id=21"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/painting-restoration-png-72-dpi.png" class="attachment-full" alt="painting restoration" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="0" class="ult-item-wrap slick-slide" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element sculpt-rest"> <div class="wpb_wrapper"> <a href="/?page_id=11"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/sculpture-restoration-png-72-dpi.png" class="attachment-full" alt="sculpture restoration" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="1" class="ult-item-wrap slick-slide" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element sculpt-comm"> <div class="wpb_wrapper"> <a href="/?page_id=13"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/sculpture-commissions-png-72-dpi.png" class="attachment-full" alt="sculpture commissions" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="2" class="ult-item-wrap slick-slide" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element consultation"> <div class="wpb_wrapper"> <a href="/?page_id=15"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/consultation-services-png-72-dpi.png" class="attachment-full" alt="consultation fees" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="3" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element artists"> <div class="wpb_wrapper"> <a href="/?page_id=8"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/meet-the-artists-png-72-dpi.png" class="attachment-full" alt="meet artists - us" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="4" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element new-directions"> <div class="wpb_wrapper"> <a href="/?page_id=17"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/new-directions-png-72-dpi.png" class="attachment-full" alt="new directions" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="5" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element awards "> <div class="wpb_wrapper"> <a href="/?page_id=19"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/custom-awards-png-72-dpi.png" class="attachment-full" alt="custom awards" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="6" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element paint-rest"> <div class="wpb_wrapper"> <a href="/?page_id=21"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/painting-restoration-png-72-dpi.png" class="attachment-full" alt="painting restoration" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="7" class="ult-item-wrap slick-slide slick-cloned slick-active animated no-animation" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element sculpt-rest"> <div class="wpb_wrapper"> <a href="/?page_id=11"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/sculpture-restoration-png-72-dpi.png" class="attachment-full" alt="sculpture restoration" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="8" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element sculpt-comm"> <div class="wpb_wrapper"> <a href="/?page_id=13"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/sculpture-commissions-png-72-dpi.png" class="attachment-full" alt="sculpture commissions" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="9" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element consultation"> <div class="wpb_wrapper"> <a href="/?page_id=15"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/consultation-services-png-72-dpi.png" class="attachment-full" alt="consultation fees" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="10" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element artists"> <div class="wpb_wrapper"> <a href="/?page_id=8"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/meet-the-artists-png-72-dpi.png" class="attachment-full" alt="meet artists - us" height="648" width="432"></a> </div> </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="11" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation"> <div class="wpb_single_image wpb_content_element new-directions"> <div class="wpb_wrapper"> <a href="/?page_id=17"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/new-directions-png-72-dpi.png" class="attachment-full" alt="new directions" height="648" width="432"></a> </div> </div> </div></div></div></div> thanks in advance,
matt
comment css:
.wpb_single_image { line-height: 0; } or add value css line-height:20px; text wont overlapped each other. hope helps :)
i guess in style.css
Comments
Post a Comment