Putting an image and text in Classic Slider

Hi there, I am using this slider to create a selection of members. Each slide will have a small image on the left and wrapped around will be the bio text of the member.

The text is fine. However when I try to add an image (150 x 150px) it gets blown up to a massive size. This happens with or without text in the slider.

As you are editing it, it looks fine but when you check online the image is massive.

Any thoughts.

Many thanks.

Hi Eileen,

Thanks for reaching out.

To better help you with your issue, we need to examine the settings of your slider. Please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Hi Marc

Details are attached.

What I was looking for is to put the image on the right and the text to the left. If you go on the page I have specified you will see a sample that I have done.

Thank you

Hello Eileen,

Thank you for providing the details. Please be informed that by default, the classic slider is used primarily for text or images. It does not work well with a mix of text and image in the slide. When you insert an image, it becomes wider because of its default setting where the image width is set to 100% using this built-in CSS code:

.x-flexslider .x-slides img {
    width:  100%;
}

If you want to override the behavior of the image inside the slide, you can modify the CSS code above and set the width to auto instead. And then you can add your modified code into X > Theme Options > CSS. Setting the width to auto will allow you to insert the image on the left side while the text is on the right side of the image in your slide.

We would love to know if this has worked for you. Thank you.

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hi Ruenel

Thank you for your tip - I will use that as it works really well. The other sliders on the site had some css to put the dots at the bottom of the slider as the arrows go over the text but this appears to have been removed and do not work at all now.

I would be grateful if you could remove the image from your post as this website is not live yet. Many thanks.

Kind regards

Hi Ruenel

I have it all working now.

Thanks.

Hi Eileen,

Great that everything is working fine at your end.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.