![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: andy, LayerSlider, smartphone, text box, WP
-
AuthorPosts
-
January 25, 2016 at 8:22 pm #571591
Please help – The text in my text boxes on LayerSlider WP shows up fine on my computer browser, but when the web site is opened on a smartphone, the text runs out the bottom of the text box and the title text is a great deal larger than it should be. How can I fix this please?
January 26, 2016 at 2:23 am #571787Hi vszybala!
Send us a link to your page and we’ll take a look. You can set your reply as private if you wish.
Cheers!
ElliottJanuary 26, 2016 at 6:00 pm #572245Hi Elliott,
I replied privately, but I can’t see my own reply, did you receive it?
-
This reply was modified 8 years, 7 months ago by
TSI.
January 26, 2016 at 6:01 pm #572250Hi Elliott,
The site is http://syriainstitute.org
You’ll be able to see the inconsistencies between viewing the website on the computer versus on a smart phone. In addition the the original and more immediate issue presented above, I was curious if you could help me with another that is related. I cannot figure out how to move the text in the text box on the website itself to a more central position. Can you tell me how I can change the placement of the text? I’ve spent hours trying to finagle it and haven’t been able to make any progress. Thank you so much for your help!January 28, 2016 at 2:12 am #573388Hey!
It’s so small that I cannot see it on smaller screens. Can you take a screenshot and highlight how your wanting it to look on mobiles?
Send us a WordPress login and we’ll take a look.
Best regards,
ElliottJanuary 29, 2016 at 5:17 pm #574685Hi I sent you 2 messages yesterday as private messages, did you not receive them? Please let me know; this is incredibly frustrating. :(
January 29, 2016 at 6:06 pm #574722I just want the title to be smaller and the rest of the text in the text box to fit and not spill out the bottom (probably a result of the huge font of the titles in the text boxes). Basically, I’d like the smart phone view to match the computer browser view as closely as possible.
Thank you.
Dani
February 1, 2016 at 2:52 am #575478Hi!
Add this to your custom CSS.
@media screen and (max-width: 767px) { .ls-slide h3 { font-size: 9px !important; } }
Regards,
Elliott-
This reply was modified 8 years, 7 months ago by
Elliott.
February 2, 2016 at 12:26 am #576130Hi Elliott. Nothing happened. Now what?
February 3, 2016 at 4:20 am #576826Hi!
Perhaps you have a typo somewhere in your custom CSS. Add it to the very top of the Quick CSS option in the Enfold settings.
Cheers!
ElliottFebruary 5, 2016 at 6:13 pm #578648Thanks Elliott, I was putting the custom CSS in the wrong area.
Would you mind helping me with the other issue as well? Essentially, I want to be able to center the text in each text box on the slider. It looks centered in the preview mode prior to publishing, but once published, the text starts that the top of the text box, rather than remaining centered.
Can you please help me resolve this? I’ve been at it for a while. Thank you.
Dani
February 8, 2016 at 6:08 am #579355Hi Dani,
Login details are not working for me, could you check and repost please?
Thanks,
RikardFebruary 9, 2016 at 12:06 am #579975No problem, see private content.
February 9, 2016 at 11:16 pm #580638Additionally, in the Candidate Tracker on our website (Table Press, Presidential Candidate Positions on Syria, Plugin Options, Custom CSS) I try to change the colors with the correlating belief in the table, but the colors on the bottom half of the table refuse to change. Can you please tell me why this is and help me fix it?
Thank you,
Dani
February 12, 2016 at 7:36 am #582054Hi!
The current layout of the layer slider is not going to work well on mobile devices or on smaller screens. I think its better if you hide the layer slider on mobile view and then add another full screen slider. Toggle the slider display by using css media queries. Example here: https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
Best regards,
IsmaelFebruary 13, 2016 at 7:24 pm #582769Hi Ismael,
I’m sorry, but that doesn’t answer my question. I already fixed the smart phone view issue, now I just want to figure out how to center the text in each text box on the slider. It looks centered in the preview mode prior to publishing, but once published, the text starts that the top of the text box, rather than remaining centered.
Thanks!
Dani
February 18, 2016 at 9:05 am #585241Hey!
Please click on the style tab in layerslider and adjust the top and left value in % for each text so they line up correctly at the center.
Regards,
Vinay KashyapFebruary 18, 2016 at 4:21 pm #585478That works only for the text box itself and its positioning, not for the text within the text box. I wish it was that simple. Now what?
February 21, 2016 at 7:24 am #586596Hey!
Edit the text box layer then go to the Attributes panel. Add a unique class in the Classes field. Use “layer-textbox” for example then add this in the Quick CSS field:
@media only screen and (max-width: 767px) { .layer-textbox { padding-top: 20px; } }
The text on the slider is a little too small on mobile view. Adding a new slider specifically for mobile would be nice.
Best regards,
IsmaelFebruary 22, 2016 at 1:33 am #586785Thanks for the advice Ismael. I apologize for my rudimentary understanding here, but where do I find the Quick CSS field? I see where to add the “layer-textbox” in the Class Field, but there does not seem to be a Quick CSS field on the same page.
Thank you,
Dani
February 24, 2016 at 3:01 pm #588410Hi!
go to Enfold->General Styling->Quick CSS
Best regards,
AndyMarch 2, 2016 at 5:56 pm #592226Hi Andy,
I applied the code to the Quick CSS, but there is already code there. I applied the most recent code into the same box seeing as there is only one, so the Quick CSS box is filed as follows (see below), but no changes were made as a result. In other words, the text was not centered, the slider on the website still has the text awkwardly aligned to the top. Can you please tell me what to do next?
@media screen and (max-width: 767px) {
.ls-slide h3 { font-size: 9px !important; }
}.menu li > a:after { content: ‘ ▾’; }
.menu li > a:only-child:after { content: ”; }@media only screen and (max-width: 767px) {
.layer-textbox {
padding-top: 20px;
}
}#mc_embed_signup .clear {
display: block;
visibility: visible;
height: auto;
width: auto;
}.blog span.post-meta-infos * {
display: none;
}
.blog span.post-meta-infos time{
display: block;
}.page-id-27.post-meta-infos {
display: none;
}March 7, 2016 at 11:49 am #594218Hi!
I’m trying to login to the site again but it’s not working. Please check (https://kriesi.at/support/topic/the-text-on-my-layerslider-text-box-is-inconsistent/#post-579975)
Try to replace the css code with this:
@media only screen and (max-width: 767px) { .layer-textbox { padding-top: 20px !important; box-sizing: border-box !important; } }
Place all css media queries at the very bottom of the Quick CSS field.
Best regards,
IsmaelMarch 22, 2016 at 3:23 am #601637Hi Ismael,
Sorry about that. The code still isn’t working, please see the private message for the correct login info.
Thank you!
March 25, 2016 at 7:38 pm #603699Hi!
I logged in and checked your Quick CSS field, but could not find Ismael’s code in it. Please add it exactly as Ismael has provided it to you. Afterwards clear browser cache and hard refresh a few times. Make sure no caching (plugin, etc.) is activated.
Best regards,
AndyMarch 28, 2016 at 8:29 pm #604044Hi Andy,
I have uploaded Ismael’s text in the past and not only did it not fix the issue (the text in the text boxes on the slider was still not centered), but the text in the text boxes became very distorted when looking at the slider on a smartphone (though still normal looking on a computer screen view), which was something I inquired about earlier in this discussion that the current code fixed. I still tried again at your request – “Please add [the code] exactly as Ismael has provided it to you. Afterwards clear browser cache and hard refresh a few times. Make sure no caching (plugin, etc.) is activated. – but the same situation unfolded. Do you have any suggestions for how to proceed?
Thanks so much,
Dani
March 29, 2016 at 3:26 am #604217Hey!
We added the class attribute directly in the h3 content of the layer. Example:
<h3 style="text-align: center;" class="layer-textbox"><span style="color: #ffffff;">Syria Conflict Overview</span></h3> <p style="text-align: center;"><span style="color: #ffffff;">The conflict in Syria is getting more</span></p> <p style="text-align: center;"><span style="color: #ffffff;">complicated by the hour. Catch</span></p> <p style="text-align: center;"><span style="color: #ffffff;">up with our concise, two-page</span></p> <p style="text-align: center;"><span style="color: #ffffff;"><a style="color: #ffffff;" href="http://syriainstitute.org/wp-content/uploads/2015/10/Conflict-Overview-secure.pdf">Conflict Overview </a><a style="color: #ffffff;" href="http://syriainstitute.org/wp-content/uploads/2015/10/Conflict-Overview-secure.pdf">Cheat Sheet</a>:</span></p> <p style="text-align: center;"><span style="text-decoration: underline; color: #ffffff;"><a style="color: #ffffff; text-decoration: underline;" href="http://syriainstitute.org/wp-content/uploads/2015/10/Conflict-Overview-secure.pdf"><strong>Read More</strong></a><a style="color: #ffffff; text-decoration: underline;" href="http://syriainstitute.org/wp-content/uploads/2015/10/Conflict-Overview-secure.pdf"><strong> </strong><strong>Here</strong></a></span></p>
Please purge plugin cache before checking the page.
Best regards,
IsmaelMarch 31, 2016 at 11:20 pm #606331Hi Ismael,
Thank you for the help! I purged the plugin cache before checking the page, but still did not see any changes. I tried to play around with the slider settings (boarder px, padding px, etc.), but nothing seemed to adjust the text in the text box so that it was centered. I apologize if I’m doing something wrong; can you tell me what I’m missing here?
Thank you,
Dani
April 2, 2016 at 1:50 pm #606966Hey!
Please check it on another browser. We already added the custom css class attribute to the h3 tag so you don’t have to do anything. The heading tag touches the edge of the box before but it is fixed now. http://imgur.com/1D9KkVf
Best regards,
IsmaelApril 4, 2016 at 5:03 pm #607748Hi Ismael,
I’m so sorry for how long this has dragged out, but I tried checking the slider on both Chrome and Safari and am seeing no difference. I asked my colleague to check on her computer at home and also sees no change. Do you recommend a different slider plugin or something that might work better with Enfold? That’s the only thing I can think of at this point…
Thank you again,
Dani
-
This reply was modified 8 years, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.