[Oliver VParticipant]

Hi!

I have read all the docs in Soliloquy KB and still not success.

I have the following page: http://www.aquarea.es/ofertas-spas/ and have introduce the captions according to the Soliloquy Docs.

As well, I have in my Light Integrety Style CSS the following code added:

.soliloquy-container .soliloquy-caption {
position: absolute !important;
display: table !important;
width: 100% !important;
height: 100% !important;
z-index: 100 !important;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
display: table-cell !important;
text-align: center !important;
vertical-align: middle !important;
padding: 20px 0 35px !important;
}

.soliloquy-container .soliloquy-caption h1 {
color: #fff !important;
font-size: 60px !important;
margin: 0 0 60px !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
letter-spacing: normal !important;
text-transform: none !important;
}

.soliloquy-container .soliloquy-caption a.soliloquy-button {
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
background-color: #ff3700 !important;
border: 3px solid #fff !important;
padding: 20px 35px !important;
font-size: 20px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

.soliloquy-container .soliloquy-caption {
bottom: 13px !important;
}

}

@media (max-width: 600px) {

/** Hide the caption and control nav for small devices since they can swipe slides */
.soliloquy-container .soliloquy-control-nav,
.soliloquy-container .soliloquy-caption {
display: none !important;
}

}
.soliloquy-caption-inside { background: transparent !important; filter: none !important; -ms-filter: none !important; }

Everything is updated: WordPress, X-shortcodes, X theme, etc….

Problem is that the text and buttom of the caption ARE NOT responsive.

What am I doing wrong? Please, help!!!

Oliver.

[Oliver VParticipant]

For your info, in my Soliloquy Settings I have configured Slider Dimensions: Full Widht 1920 x 1080 px.
As well option for Create Mobile Sliders Images SELECTED and mobile dimensions 600 x 200px.

[ZeshanMember]

Hi Oliver,

Thanks for writing in!

Upon checking, the slider isn’t loading at my end and your website is having many jQuery conflicts (see: http://prntscr.com/5kqyk0). The conflicts could be due to the 3rd party plugins, I’d advise testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks!

[Oliver VParticipant]

Hi!

Thanks for such a quick reply. I really appreciate it!

Indeed, you ckecked my page when I was ckeking out conflict with other plugings.

Right now, as you can see at http://prntscr.com/5kr0tp there is only one conflict? Might be this the reason for not being responsive Soliloquy?

Thanks!

Oliver.

[Oliver VParticipant]

Now, I have checked again http://www.aquarea.es/ofertas-spas and there is not conflict in the console after reloading the page once…

Maybe it helps you, but before reloading I had this error in the console:

“Can not read properly “top” of undefined”.

Many thanks for helping me!!!

Oliver.

[ZeshanMember]

Hi Oliver,

Thanks for posting in!

Using the proxy, I’m able to see the slider, maybe there is something wrong with my internet connection. So, I’m seeing some custom CSS changes you’ve made for the soliloquy slider (see: http://prntscr.com/5kr4v4), and upon removing it, the slider is working just fine on smaller devices (see: http://prntscr.com/5kr4y6).

As soliloquy is a 3rd party plugin and the issue is due to your customization of it, regretfully, we cannot provide support for it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Oliver VParticipant]

Hi! Thanks again for your reply.

I tested removing the code within my Style.css, but unfortunatelly removes boxes and keep small in regular pc screens.

What it worries me is that even doesn´t resize the buttom when reducing the browser size in pc. Might be related this to your theme? Nothing is responsive….

Regards.

Oliver.

[ZeshanMember]

Hi Oliver,

We’re sorry to hear about your issue!

However, upon checking, the caption is appearing just fine at my end if I remove your custom CSS code (caption is small, see: http://prntscr.com/5krgei). Would you mind providing us with screenshots of the issue after removing your custom CSS styling so that we can take a closer look and provide you with a tailored response?

Cheers!

[Oliver VParticipant]

Hi! Of course…

After removing the soliloquy code in style.css, I have the following full screen size in my browser: http://prntscr.com/5ks38p

If I make the size into mobile size I have this: http://prntscr.com/5ks3jm (Still looks good). But If I make it smaller, at the end dissapairs the caption.

This code:

.soliloquy-container .soliloquy-caption {
position: absolute !important;
display: table !important;
width: 100% !important;
height: 100% !important;
z-index: 100 !important;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
display: table-cell !important;
text-align: center !important;
vertical-align: middle !important;
padding: 20px 0 35px !important;
}

.soliloquy-container .soliloquy-caption h1 {
color: #fff !important;
font-size: 60px !important;
margin: 0 0 60px !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
letter-spacing: normal !important;
text-transform: none !important;
}

.soliloquy-container .soliloquy-caption a.soliloquy-button {
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
background-color: #ff3700 !important;
border: 3px solid #fff !important;
padding: 20px 35px !important;
font-size: 20px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

.soliloquy-container .soliloquy-caption {
bottom: 13px !important;
}

}

@media (max-width: 600px) {

/** Hide the caption and control nav for small devices since they can swipe slides */
.soliloquy-container .soliloquy-control-nav,
.soliloquy-container .soliloquy-caption {
display: none !important;
}

}

.soliloquy-caption-inside { background: transparent !important; filter: none !important; -ms-filter: none !important; }

…. This code makes the h1 more visible, and the button have a box… If I remove it I don´t have good results…. How to do it?

Thanks!

Oliver.

[Oliver VParticipant]

I would like the slider work same as http://soliloquywp.com/ . Fully responsible and moving well….

[ZeshanMember]

Hi Oliver,

Thank you for the screenshots!

If you checkout the demo of soliloquy slider, they are using media queries to reduce the sizes of buttons and text on smaller devices (see: http://prntscr.com/5kswq9). If you want to achieve similar functionality, it can be done by adding media queries to reduce the font sizes of the text and buttons. But regretfully, as mentioned in our KB article on Soliloquy, we have limited support for it that only covers the compatibility issues and any question regarding animations, transitions or responsive will fall beyond the scope of support we can offer:

Understanding certain features and how to utilize them is something that is very important if you hope to take full advantage of the Soliloquy plugin. While we bundle the plugin with our theme and have used it in a selection of demos, it is recommended that you direct any questions you have about the plugin to the provided online documentation as it will more thoroughly address any matters you would like to know more about with the plugin.

Thank you for understanding. Take care!

[John EzraMember]

Hi Oliver,

As mentioned above customization will fall outside our scope, but we would like to point you in the right direction.

From your above pasted code, I just added some media queries and some minor adjustments (you will need to play around with these to get them just right), it wont work the same as the one in their demo as you are not using the same founts and/or div selectors, but hope you get the idea. Again regretfully we wont be able to support further as this falls beyond scope, thanks for understanding, happy holidays!

.soliloquy-container .soliloquy-caption {
position: absolute !important;
display: table !important;
width: 100% !important;
height: 100% !important;
z-index: 100 !important;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
display: table-cell !important;
text-align: center !important;
vertical-align: middle !important;
padding:6% 0 8% !important;
}

.soliloquy-container .soliloquy-caption h1 {
color: #fff !important;
font-size: 350% !important;
margin: 0 0 60px !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
letter-spacing: normal !important;
text-transform: none !important;
}

.soliloquy-container .soliloquy-caption a.soliloquy-button {
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
background-color: #ff3700 !important;
border: 3px solid #fff !important;
padding: 20px 35px !important;
font-size: 20px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

	.soliloquy-container .soliloquy-caption {
		bottom: -13px !important;
	}

	.soliloquy-container .soliloquy-caption h1 {
		font-size: 280% !important;
	}

	.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
        padding: 6%px 0 6% !important;
    }

    .soliloquy-container .soliloquy-caption a.soliloquy-button {
        font-size: 16px !important;
        padding: 12px 20px;
    }

}

@media (min-width: 600px) and (max-width: 768px) {

	.soliloquy-container .soliloquy-caption {
		bottom: -13px !important;
	}

	.soliloquy-container .soliloquy-caption h1 {
		font-size: 280% !important;
	}

	.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
        padding: 6%px 0 6% !important;
    }

    .soliloquy-container .soliloquy-caption a.soliloquy-button {
        font-size: 13px !important;
        padding: 12px 20px;
    }

}

@media (max-width: 600px) {

/** Hide the caption and control nav for small devices since they can swipe slides */
	.soliloquy-container .soliloquy-control-nav,
	.soliloquy-container .soliloquy-caption {
		display: none !important;
	}

	.soliloquy-container .soliloquy-caption h1 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
        padding: 20px 0 6% !important;
    }

}
.soliloquy-caption-inside { background: transparent !important; filter: none !important; -ms-filter: none !important; }

.home-hero .soliloquy-container h1 {
color: #fff;
font-family: "garamond-premier-pro";
font-size: 60px;
margin: 0 0 60px;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
letter-spacing: normal;
text-transform: none;
}

@media screen and (max-width: 768px) {
     .soliloquy-container .soliloquy-caption h1 {
    font-size: 36px!important;
    }
}

[Oliver VParticipant]

Hi Support!

Many thanks for your GIFT! I really appreciate helping me with this problem.

I have made to tests and understand much better now the problem. You definetely have helped me.

Thanks again for this X-mas gift! jajajajaja…. 😉

Merry X-mas.

Oliver.

[RadModerator]

You’re sooo much welcome Oliver, always 🙂

Merry Christmas, enjoy your holiday.

[Oliver VParticipant]

Hi Support,

Following our previous conversation, (good help by the way), I asked as well Soliloquy Staff to see which is the problem, to avoid future problems.

Adding and customizing some of your providing lines, I was able to work with the Soliloquy Slide (now working in http://www.aquarea.es). But the question is: Do I need to do this work always for each slide??? The answer obviously should be “No”.

This is the reply I had from Soliloquy Staff:

Fecha Hoy 06:20
Hi there,
Soliloquy is automatically 100% responsive. If you inspect the div that Soliloquy is sitting in, you can see that x-theme is using some media queries to limit the max-width to 1200px. When I turn those two CSS rules off using Chrome Inspector, Soliloquy, as expected, is completely responsive and is 100% width: http://screencloud.net/v/bAm9

You can see x-theme’s first rule for 1200px max width, and second rule for 1180px here: http://screencloud.net/v/8qOr

So it seems the problem is with the X width. How to fix this without having to add specific code each time?

Thanks for your reply. Regards.

Oliver.

[Author]

Posts