-
Posts
-
I need to make some headlines mobile responsive within LayerSlider. They are getting lost, i.e. too big, on mobile. I had to approximate the H3 Enfold setting since LayerSlider doesn’t use the same CSS. Here is the code used in the slider for the text:
<span style=”font-size: 40px; font-weight: 400; line-height: 110%; text-align: left; color: #ffffff; opacity: 0.8; filter: alpha(opacity=80); text-shadow: 2px 2px 2px #666666;”> Because looking good is half the game. </span>
This is the code I use in “Quick CSS” within Enfold Child which works fine on all Enfold controlled text to size the headlines:
@media only screen and (max-width: 640px) {
h3 {
font-size: 30px !important;
}
}I would like to do the same thing within the individual slider layers, but nothing I try works. I have tried giving the layer an ID, #home3, but can’t seem to affect it.
Do you have any suggestions on how I can accomplish this?
Hi blaircomm!
Can you send us a link to your page so we can take a look? You can set your reply as private if you wish.
Best regards,
ElliottI am building a large ecommerce site for this client, and this is the interim site for the next 3-months. It will go live this coming week—both sites will have the same issue with the headlines within the layer slider that should match the headlines done in Enfold. I can make the headlines in the layer slider raster images, but it’s not very good, won’t match and will get very small on mobile. Plus the ecommerce site will be completely Retina ready so the raster headlines will pose a problem.
There must be some way to set media queries and CSS for the vector headlines within layer slider.
Hi!
Try dragging a codeblock element to your page content and add this inside.
<style type = "text/css"> @media screen and (max-width: 767px) { .ls-l > span { font-size: 20px !important; } } </style>Regards,
ElliottThanks for the feedback. I tried it exactly as suggested—and in as many other ways as I could think of including adding the media query to the Enfold custom css and the enfold child custom css seperately, nothing worked.
Is there any way I can customize the LayerSlider’s “H1” css to style the type and add the media query within it’s specifications? (Using the Enfold child custom css or the Quick css) That would take the custom styling out of the text of the layer and I could just specify “H1” for the headline.
Otherwise, I’ll just use raster headlines and know not to design it that way in the future.
Thank you.
Hey!
Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.
Regards,
RikardHere is a temporary login. I am also working on the site, so make a clone of a page of a copy of a layer if you want to test something.
Hi!
Sorry for the late reply, I tried accessing the site at /home2/ but I got a 404 page, did you change the URL?
Cheers!
RikardI had to make the site live using a workaround of raster headlines in the layerslider. However, I have replaced the page at http://swingcontrol.com/home2/
Please work on that page for testing, and make duplicates of the layerslider for tests to avoid damage to online work.
My most pressing issue right now is covered in another support topic. Please see https://kriesi.at/support/topic/menu-link-suddenly-not-working/
That has made the main page of the site unworkable just as it went live and I MUST fix it fast.
Thanks.
OK. I just fixed the anchor linking issue. My bad markup. So it’s OK now.
If you can find a fix for the responsive type in LayerSlider, that would be really helpful.
Thanks.
Hi:
I still need to make the headlines mobile responsive within LayerSlider. I had to make the site live using a workaround of raster headlines in the layerslider. However, I have a working page at http://swingcontrol.com/home2/ to test on.Please work on that page for testing, and make duplicates of the layerslider for tests to avoid damage to online work.
The problem is how to make text layers in Layerslider responsive using media queries.
Hi!
you are using an image file instead of text for you headlines. Please go for text for your text, so it also works well on smaller devices.
Regards,
AndyHi: Thanks for your response. This has dragged on so you’ll need to read through the posts to get the situation.
I do not use image files for headlines, however I had to make the site live using a workaround of image, (rasterized,) headlines in the layer slider so they would be responsive on mobile, which headline text was not within LayerSlider. That is the problem.
Please see this page at http://swingcontrol.com/home2/ to understand the issue—view it at mobile size.
The headlines within LayerSlider need to be mobile responsive. They are getting lost, i.e. too big, on mobile. LayerSlider doesn’t use the same CSS as the Enfold overall theme, so Quick CSS doesn’t seem to affect it. All code placed within LayerSlider does not affect the responsiveness—I have tried all I could think of—and it doesn’t accept media queries.
This is the code I use in “Quick CSS” within Enfold Child which works fine on all Enfold controlled text to size the headlines:
@media only screen and (max-width: 640px) {
h3 {
font-size: 30px !important;
}
}I would like to do the same thing within the individual slider layers, but nothing I try works. I have tried giving the layer an ID, #home3, but can’t seem to affect it. I have also scoured the forum and tried all solutions, but they do not work.
I have provided the temp admin login, and the password for the test page. I am turning this site, an interim one, into a large ecommerce site and will need to resolve this issue on both the interim site and the final site.
If you guys can help me resolve this I would be grateful.
Thanks.
Hi!
I activated your “sc.main-4r2” slider again, as images are better to control responsiveness.
I defined a unique class for you headline3 called “lsheadline3”:
Then I used this unique class to control it via Quick CSS field and used this code for mobile devices:
@media only screen and (max-device-width: 736px) { .lsheadline3 { width: 420px !important; }}You need to do this for every headline you want to control. Adjust the width value as needed.
Hope this helps!Best regards,
AndyHi:
Thank you for the response.
The slider operates exactly as it did before. I already had raster, (that is image headlines,) inserted into the slider as a workaround for the type, (that is vector fonts,) not being responsive within LayerSlider, as it simply does not respond to the same CSS Enfold does.
Did you test it out on the 4r slider with the vector font text? It doesn’t work for me.
I added the class to the slider text layers in the “attributes” section, and tried many variations of controlling that class with CSS that you added to the Quick CSS and CSS I wrote for the “styles” custom CSS section within the slider, and again custom code separately within the Enfold Quick CSS section. Nothing worked. The slider operates exactly as it did before.
So, I don’t get it. Theoretically it should, but there must be some CSS overwriting the attempts at controlling the type and I don’t know where that is—a hierarchy issue within the LayerSlider’s CSS cascade. Images were always responsive within LayerSlider, just not text. That’s the problem.
I think I have concluded that it is not possible to make the LayerSlider text responsive—or to control it with CSS. I will look inside the Enfold theme CSS files to see if I can spot the issue, but I do not change those. There must be a CSS file for the LayerSlider somewhere, but for now I don’t think it’s possible to control text with CSS within the slider.
Thank you for your efforts.
Hi!
as I said in my previous post images are better to control responsiveness. That is why I activated your “sc.main-4r2″ instead of your “sc.main-4r″ slider. Your images used as headlines should be controllable via CSS as I showed you in my previous post.
Clear browser cache if necessary and refresh your website a few times.
Regards,
AndyIs it possible to get a proper fix for this?
With mobile taking 50% of site traffic now it’s imperative to have a working slider on mobile. Images for text is a hack from the 1990s!
Jason
Yes, I agree. We are going to go live with our site within the month and still have image headlines in the layer-slider. It looks “OK” for the most part, but not proportionally as good when it gets to mobile size. I could never find a selector that worked with text headlines within the sliders, and tried many to no effect. It has a section to add CSS, but doesn’t seem to work for this issue—and adding CSS to the Enfold theme without the right selector didn’t work.
It seems to be a Layer Slider issue operating on it’s own CSS rules.
– Michael
Hi!
you can try to make text behave on different screen sized and devices for layerslider as you wish too, but I think it will be much more difficult. That is why I suggested to you to use images instead.
What do you mean with “selector”?You can try to contact the guys from layerslider here: http://support.kreaturamedia.com/faq/
Regards,
AndyIn CSS, selectors are patterns used to select the element(s) you want to style.
http://www.w3schools.com/cssref/css_selectors.asp
For theme developers this is their support policy: “You need to handle the support requests after the included Items.” They do n to support Layer Slider if it is part of a theme, that is for the theme developer. http://support.kreaturamedia.com/faq/4/layerslider-for-wordpress/#group-3&entry-18
Thanks for your response.
Hey!
hm I thought they could tell you a good way how to handle text on layerslider for different devices, as they know their plugin best. However, you can try setting that Layer an ID and then with some Quick CSS, for example:
#YourLayerID { font-size: 22px !important; }I still recommend to use images instead of text though, because you will have a tough time to make it fully responsive on layerslider.
Cheers!
Andy
- You must be logged in to reply to this topic.