Problems displaying a text field from within a classic slider next to an image

[dubdubdan]

I’m experiencing some difficulty trying to display a small amount of text next to my snapchat image. I have included a screenshot here. I have tried various methods to position the image next a block of text, but all attempts fail to work. Can you please shed some light on my issue, pretty please?
Many thanks

The url for this is www.dubdubdan.com/about (third slide on the classic slider towards the bottom of the page).

[jumar]

Hello @dubdubdan,

Thanks for writing in!

Kindly update your Snapchat code to:

<p class="my-snapchat-text"><img class="my-snapchat-img" src="https://dubdubdan.com/wp-content/uploads/2018/02/DubDubDan-Snapchat-Blank-300x300.png" alt="SnapChat" draggable="false">Text Here</p>

Then add this code into X > Theme Options > CSS:

.my-snapchat-text {
    line-height: 300px;
}
.my-snapchat-img {
    margin: 0 15px;
    float: left;
}

Hope this helps.

[dubdubdan]

Thank you for your response! However, the text appears beneath the image now rather than the right. I’ve just had another google with no avail.

[jumar]

Hello there,

Let us try again. Please update your Snapchat code to:

<div class="my-snapchat-container">
    <div class="my-snapchat-thumb"><img src="https://dubdubdan.com/wp-content/uploads/2018/02/DubDubDan-Snapchat-Blank-300x300.png" alt="SnapChat" /></div>
    <div class="my-snapchat-content"><p>Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here</p></div>
</div>

Then replace your CSS code to:

.my-snapchat-container {
    overflow: auto;
}
.my-snapchat-thumb {
    float: left;
}
.my-snapchat-thumb img {
    display: block;
}
.my-snapchat-content {
    margin-left: 320px;
}

I noticed that you have a normal layout. Did you disable your classic slider? These codes might be adjusted if you enable your classic slider again.

Hope this helps.

[dubdubdan]

Hi, thank you so much for your reply, and sorry for the delay in getting back to you. I have reverted back to a different design now, but have noted what you have mentioned. I am looking to use this in a little more detail in the future.
On a seperate note, do you know if X Theme offer any type of Parallax sliders?
many thanks

[ruenel]

Hey There,

Thanks for updating in! You may use the bundled Revolution Slider or Layerslider in X wherein these sliders enables you to have a Parallax effect in the slides. You can install it by going to X > Validation > Extensions section. To know more about how we have integrated this plugins, please check this out: https://theme.co/apex/forum/t/extension-revolution-slider/71, https://theme.co/apex/forum/t/extension-layerslider/70

Hope this helps.