Image slider with custom links

  • Resolved jusch23

    (@jusch23)


    5 years, 4 months ago

    Hi,

    I was adding custom links to my images in the image slider block and observed that the images with links were not centered anymore. I added following css code to fix it:

    
.wp-block-getwid-images-slider .wp-block-getwid-images-slider__item a {
    width: auto;
}

    Normally the width is set to 100%. Is this an error in the block or can I solve this in another way?

    Thank you for the great plugin.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor motopress

    (@motopress)

    5 years, 4 months ago

    @jusch23 we have next styles in the plugin

    .wp-block-getwid-images-slider .wp-block-getwid-images-slider__item a {
    display: block;
    width: 100%;
    text-decoration: none;
}

    you may check what styles may override them in your theme.

    Thread Starter jusch23

    (@jusch23)

    5 years, 4 months ago

    @motopress I overwrote the width with “auto”, because with width=100% my image is not centered. My images without a custom link are centered as desired. I think the css flex property (justify-content: center;) of the following css selector is not applied correctly on the children elements (<figure>) of the anchor tag of the custom link:

    .wp-block-getwid-images-slider .wp-block-getwid-images-slider__item {
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center;
    position: relative;
}

    HTML:

    
<div class="wp-block-getwid-images-slider__item slick-slide slick-active" style="width: 378px;" data-slick-index="1" aria-hidden="false" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01">
	<a href="link" target="_blank" rel="noreferrer noopener" tabindex="0">
		<figure> <!-- not centered -->
			<img src="" alt="" data-id="1234" data-link="" data-link-target="_blank" data-link-rel="noreferrer noopener" data-original-link="" data-custom-link="" class="wp-block-getwid-images-slider__image wp-image-1234" srcset="">
		</figure>
	</a>
</div>

    Could you try to reproduce this? Alternatively, I think the custom link anchor could be displayed as flex and the justify-content set to center. But I’m not that into your plugin, only some guesses from me.
    If the problem can be solved differently or the problem is caused by my theme (astra), please let me know. Thank you.

    Plugin Support dimned

    (@dimned)

    5 years, 3 months ago

    Hi @jusch23,
    I could not replicate the issue. Could you please provide the website URL to the page with a slider so I’ll be able to inspect styles there?

    Thread Starter jusch23

    (@jusch23)

    5 years, 3 months ago

    Hi @dimned,

    here is a link to the website: SV Weidach. The slider is at the bottom. When you disable my custom style setting, which sets width: auto, the images aren’t centered anymore.

    • This reply was modified 5 years, 3 months ago by jusch23.
    Plugin Support dimned

    (@dimned)

    5 years, 3 months ago

    Hi @jusch23,
    Thanks for your reply. I’ve forwarded your case to our developers. We will notify you if we have any news. Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Image slider with custom links’ is closed to new replies.