Scaling/change size of the slider text and bars?

Dear support staff

Is it possible the have scaling for text bars on the slider image? I find it awkward as it remains huge in size even if the slider image itself is scaling and especially when it turns to mobile size. I found a topic advising to keep the text slider on in mobile version too with specific CSS code, but the size won’t scale accordingly.

And second thing, I have seen several child-themes posted by Movin here and there when users ask for help, and I would like to know are all those modifications to users specific needs only and not chronological updates good for everyone like the parent theme updates?

I suspect the plug in I was offered on WP Support forum like a week ago or so for some header image scaling issues clash with child theme that I needed for testing slider on pages(not posts). For that I found another support topic with special child theme.

https://colorlibsupport.com/t/slider-for-pages/#post-33351

Seems I can’t have it both ways, the header image modification and the slider, even only text slider(if necessary) for page at the same theme, at least with my coding skills. And I am hesitant going to change anything in functions.php as I already made it wrong once and the system denied access to dashboard and gave blank screen and I had to go to cPanel to restore the original function.php to the files folder. For a beginner that was already scary move:-)

Thanks in advance!

Hi @kauno,

I hope you are well today and thank you for your questions.

Is it possible the have scaling for text bars on the slider image? I find it awkward as it remains huge in size even if the slider image itself is scaling and especially when it turns to mobile size. I found a topic advising to keep the text slider on in mobile version too with specific CSS code, but the size won’t scale accordingly.

By default in Sparkling theme the slider text is not displayed on mobile devices but you want to display it then you can do so by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

@media (max-width: 768px){
div.flex-caption {
    display: block;
}
}

After displaying the slider text on mobile devices using above solution, i can see the text is resizing correctly according to mobile device size but if for some reason it doesn’t resize on your site then Could you please share me your site URL where it’s not displaying correctly so that i can troubleshoot it?

And second thing, I have seen several child-themes posted by Movin here and there when users ask for help, and I would like to know are all those modifications to users specific needs only and not chronological updates good for everyone like the parent theme updates?

The child theme provided are to users specific needs only and not chronological updates good for everyone like the parent theme updates.

If you make changes in the parent theme file then you have to make these changes again after theme updation as changes made in the parent theme files get lost on theme updation so we recommend to use child theme.

Best Regards,
Movin

Thanks Movin. Is it possible to send you the link in private message because I would not like to make the site publicly viewable yet as it’s not ready? Should I tick the “Set as private reply”? The code you offered seems to be the same one I tried already. It makes the text remain on top even in mobile mode, but it won’t scale it down and therefore it’s very bulky and gets out of the viewable area and soon fills the whole screen. Is there a way to make it go smaller in size as the slider image also scales smaller in mobile mode and even in the normal mode?

Thanks Movin. Is it possible to send you the link in private message because I would not like to make the site publicly viewable yet as it’s not ready? Should I tick the “Set as private reply”?

Yes please share it privately by checking the option “Set as private reply”.

I found this thread when searching “how to show slider text on mobile”

I added the code and it worked fine.

However, it looked terrible. The text overlapped the header and was far too big for the slider.

Is there no way of having the text display nicely underneath the nicely-scaled slider image on mobile?

Hi @jdgmedia,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/sparkling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Thanks,
Moivn

Hi, I must confess that I had not sent the private reply for Movin yet to solve the issue. I am hesitant making my site public even for shrot time before it’s ready. The domain has been publicly visible in several places and someone may visit the unfinished site even if I open it for two days or so… isn’t there any other way to find out what’s worng, as now there is another person asking the same thing?

Can you jdgmedia make your site visible for Movin to check out? It would help us both.

Hi There,

If you are facing the same issue as described on the following topic then please try using the solution posted on that topic to resolve it.

https://colorlibsupport.com/t/slider-not-completely-visible-on-mobile/#post-50704

Best Regards,
Movin

Hi, thanks for the tip, but it does not work. I already have this code which you provided in some other instance in CSS for having the slider text to appear at all on mobile mode;

@media (max-width: 768px){
div.flex-caption {
display: block;
}
}

…but the additional code you referred on the reply did not make the font size to scale among the mobile mode. It only made the font size smaller in both, normal and mobile, but the text and the reddish and black bars behind are also still bulky and won’t scale either.

Hi again

I think now I made it work better using this code combination:

@media (max-width: 768px){ div.flex-caption { display: block; }

#page .flex-caption *{

font-size: 8px;
}

It now swtiches the font size and even the previously mentioned bulky bars behind are more nicely scaling!! But still, one problem, the text and bar field are moving upwards when scaling smaller and at some point they overlap with the dark backround bar on the top. So how to make them stay in the middle or at least within the boundaries of the slider image?

What I did was…

@media (max-width: 768px){
div.flex-caption {
    display: block;
}
.flex-caption h2 {
font-size: 14px;
background: rgba(59, 59, 59, 0.8);
}
.flex-caption .excerpt {
display: none;
}

This removed the excerpt part from the slider and just left the header, nice solution rather than what was there before.

Thanks. Not bad. But still in my case the texts are pushing upwards even in the normal mode so that they reach the upper bar pretty soon when scaling a bit. They won’t stay or scale within the boundaries of the image. Maybe I should try the “%” or “em” font sizes?

Secondly, are you able to make the slider text separately clickable apart from the slider image behind? On that other website Movin liked as a reference (http://www.truckersdag.nl)that uses Dazzling theme the slider text is separately clickable from the backround image. And still it seems that site has header logo above the slider/greater image as if the greater image would be modified static slider one, not a header, even if it works as a kind of header. I wonder how to do the same in Sparkling.

Thanks. Not bad. But still in my case the texts are pushing upwards even in the normal mode so that they reach the upper bar pretty soon when scaling a bit. They won’t stay or scale within the boundaries of the image. Maybe I should try the “%” or “em” font sizes?

If you can’t share your site URL privately then could you please share the screenshots of the issues so that i can better understand it and will help you to resolve the issue?

Secondly, are you able to make the slider text separately clickable apart from the slider image behind? On that other website Movin liked as a reference (http://www.truckersdag.nl)that uses Dazzling theme the slider text is separately clickable from the backround image.

You can try achieving this by using the attached custom child theme of Sparkling theme that contains some custom code.

Hi…finally here is the screen shot I was referring. As you see it won’t scale very well. I will also refer to this post in my other support thread which I am going to leave soon. Looking forward to finally settle all my issues at once:-)

@kauno You can try resolving that issue by using the below CSS code.

@media (max-width: 768px){
 div.flex-caption {
    bottom: 5px;
} 
}

Hi Movin, thanks for the tip, but unfortunately it did nothing. I tried it all alone and in combination with some code there was previously for the slider text excerpt scaling fix(which haven’t really worked well either). I hope you can make all these fixes to one child theme I was asking for in another thread still unanswered. Thank you in advance!

Hi again, now it works more or less as I found a way to combine it to the previous code.

Glad it’s working fine for you now.

Hi, are you able to make the modified child theme or functions.php at least for the issues I addressed in this topic:
https://colorlibsupport.com/t/static-slider-sub-menus-and-linear-scaling/

…if the linear scaling is difficult to do, you can drop it, but the sub-menu thing would be nice.

@kauno Please do not bump by referring the topics in your other topics. We will reply all your created topics ASAP so please have a patience.