Hey guys,
Need to make a media query for a block of text
The slider on this page works fine if I embed the text in an image but as soon as I use <h3> and <p> tags it does not shrink on mobile phones.
I don’t understand. Where are you adding text, in the slider? Do you have an example of this not working?
Managed to add some css to the exsisting class for the sdhomeslider-description
It’s not perfect but it will do
Sam the OP is using an image for the all the text and content in the slider.
I believe the OP wants to ad real text and real headings instead of just an image.
If this is the case then the answer is not so simple where sliders are concerned and it would be better to look for a responsive slider out of the box rather than trying to write one from scratch.
You can’t expect text just to scale up and down like an image (although with vw units you can get something similar) but the main problem is that text is not readable at smaller sizes and indeed for mobile you should be looking at a minimum of 16px or readable text anyway.
It may be that you could adapt your current slider if it allows multiple elements but as Sam said above you’d need to create a demo of it with the text in place that you want to re-arrange and the we could try and help with the media queries.
Usually this means changing the images and the text content around for smaller devices and indeed in some cases removing all but essential items. Indeed a lot of sites simply remove the slider and replace it with some static text heading for smaller devices.
Thank you for your advice.
I played around with media queries but it’s either not perfect or difficult to read like you said.
I think it’s going to be better to find another slider to replace the default slider in Prestashop.
Until then I just have to use ugly embedded text in the image.
Thanks again
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.