Viewing 30 posts - 1 through 30 (of 36 total)
  • Author
    Posts
  • #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?

    #571787

    Hi 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!
    Elliott

    #572245

    Hi Elliott,

    I replied privately, but I can’t see my own reply, did you receive it?

    • This reply was modified 8 years, 10 months ago by TSI.
    #572250

    Hi 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!

    #573388

    Hey!

    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,
    Elliott

    #574685

    Hi I sent you 2 messages yesterday as private messages, did you not receive them? Please let me know; this is incredibly frustrating. :(

    #574722

    I 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

    #575478

    Hi!

    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, 9 months ago by Elliott.
    #576130

    Hi Elliott. Nothing happened. Now what?

    #576826

    Hi!

    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!
    Elliott

    #578648

    Thanks 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

    #579355

    Hi Dani,

    Login details are not working for me, could you check and repost please?

    Thanks,
    Rikard

    #579975

    No problem, see private content.

    #580638

    Additionally, 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

    #582054

    Hi!

    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,
    Ismael

    #582769

    Hi 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

    #585241

    Hey!

    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 Kashyap

    #585478

    That 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?

    #586596

    Hey!

    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,
    Ismael

    #586785

    Thanks 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

    #588410

    Hi!

    go to Enfold->General Styling->Quick CSS

    Best regards,
    Andy

    #592226

    Hi 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;
    }

    #594218

    Hi!

    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,
    Ismael

    #601637

    Hi Ismael,

    Sorry about that. The code still isn’t working, please see the private message for the correct login info.

    Thank you!

    #603699

    Hi!

    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,
    Andy

    #604044

    Hi 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

    #604217

    Hey!

    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,
    Ismael

    #606331

    Hi 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

    #606966

    Hey!

    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,
    Ismael

    #607748

    Hi 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

Viewing 30 posts - 1 through 30 (of 36 total)
  • You must be logged in to reply to this topic.