Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 4, 2018 at 7:01 pm #981318
    zizibe1

    Hi,

    1.

    I added a symbol (big red dot) to the caption of a Fullscreen Slider like this:

    «Lorem ipsum <FONT style=”font-size: 27pt; color: #FF0000; vertical-align: 5pt”>⬤</FONT> dolor sit amet.»

    When I watch it on a computer screen, caption (36px) and symbol (27pt) are the correct size. On mobile devices, the caption changes to a smaller font size, which is okay, but the symbol stays the same size as before. It is way too big in comparison to the rest of the caption.

    2.

    Similar problem in a Text Block. Here I added the symbol at the end of the text like this:

    <h3>«Lorem ipsum dolor sit amet.» <span style=”font-size: 20pt; color: #ff0000; vertical-align: 4pt;”>⬤</span></h3>

    On a computer screen, caption (36px) and symbol (20pt) are the correct size. But on mobile devices, both, caption and symbol, are way too big. There the font size should be only 24px and the size of the symbol should be adjusted.

    How can I fix this?

    Best regards,
    zizibe1

    July 6, 2018 at 12:22 pm #982011
    Mike

    Hey zizibe1,
    Instead of using inline-styles, using a span class would give you more options.
    On your homepage, I changed your code for the red dot to:

    <span class="red-dot">⬤</span>

    then I added this css to your Enfold Theme Options > General Styling > Quick CSS field

    .red-dot {
font-size: 1em;
color: #ff0000;
}

    I used “1em” because it will change it’s size automatically, you could adjust if you like using fractions such as “1.3em”
    Please try using this method in the other places you have the red dot.
    Please clear your browser cache and check.

    Best regards,
    Mike

    July 7, 2018 at 4:59 pm #982508
    zizibe1

    Hi Mike,

    Thank you very much for your support.

    1. I added a rule to the bottom of your code to align the red dot.

    First code at the bottom of Quick CSS:

    .red-dot {
font-size: 0.8em;
color: #ff0000;
vertical-align: 5.7pt
}

    On a computer screen, it looks alright now. But on mobile devices, the red point is too high. How can I adjust this?

    2. I added the span class also to the text block, but there it doesn’t work. On a computer screen, it looks alright, but on mobile devices, both, caption and red dot, are way too big. How can I fix this?

    Second code at the bottom of Quick CSS:

    .red-dot-2 {
font-size: 0.8em;
color: #ff0000;
vertical-align: 4.2pt
}

    Best regards,
    zizibe1

    July 7, 2018 at 5:51 pm #982517
    Mike

    Hi,
    Thank you for the screenshots and login, I changed your vertical-align to baseline to keep it in line.
    I also changed your “red-dot-2” span to “red-dot” because you can use the same span and css for every red dot on your site, if you agree that this is working correctly, you can remove the css rule in your Quick CSS.

    For your page with the text block, I see your are using a H3 for the caption, and I assume that you like the size of the text & red dot on desktop & tablet, so for mobile I added the class “about” to the h3 and then added this css to your Quick CSS:

    @media only screen and (max-width: 767px) { 
h3.about {
font-size: 20px !important;
}
}

    Please adjust the font-size to suit.

    Best regards,
    Mike

    July 7, 2018 at 10:26 pm #982598
    zizibe1

    Hi Mike,

    Thank you very much for your reply and the adjustments.

    Yes, as you suggested, I removed the css rule of the “red-dot-2” span in the Quick CSS.

    Unfortunately, the position of the red dot is too low now, but referring to your first post, I could adjust it. I used “em” instead of “pt” and changed your code like this:

    .red-dot {
font-size: 0.8em;
color: #ff0000;
vertical-align: 0.2em;
margin-left: -0.1em;
margin-right: -0.1em;
}

    As you see above, I also adjusted the left and right margin a little bit. Now, visually, the position of red dot looks alright to me.

    ***

    For my page with the text block, the code from your second post works fine. Thank you very much.

    ***

    Back to the caption title of the Fullscreen Slider. On mobile devices, the text & red dot are a little bit too small. I’ve tried to increase them using the code of your second post combined with the code of your first post and “h2” instead of “h3”, but nothing happens. How can I adjust this?

    Here is the modified code I added to the Quick CSS:

    @media only screen and (max-width: 767px) { 
h2.about {
font-size: 24px !important;
}
.red-dot {
font-size: 1em;
color: #ff0000;
vertical-align: 0.2em;
margin-left: -0.1em;
margin-right: -0.1em;
}
}

    Best regards,
    zizibe1

    July 7, 2018 at 11:24 pm #982606
    Mike

    Hi,
    In your new code above for the homepage slider, you had the class “about” which is only found on your other page “h3.about”
    I adjusted your new code so it would work:

    @media only screen and (max-width: 767px) { 
.responsive #top.home .slideshow_caption h2 {
font-size: 24px !important;
}
.responsive #top.home .slideshow_caption h2 .red-dot {
font-size: 1em;
color: #ff0000;
vertical-align: 0.2em;
margin-left: -0.1em;
margin-right: -0.1em;
}
}

    you will note that I added “.responsive #top.home .slideshow_caption h2” to your “reddot” so it would not conflict with your other “reddot” now that they are different sizes.
    Please clear your browser cache and check that this meets your needs.

    Best regards,
    Mike

    July 7, 2018 at 11:56 pm #982612
    zizibe1

    Hi Mike,

    Great. Now the text & red dot have the right size.

    Thank you very much for your fast and competent support.

    You can close this topic now.

    If I have any other questions concerning this particular topic, is it possible to reopen it or do I have to create a new topic?

    Best regards,
    zizibe1

    July 8, 2018 at 12:14 am #982615
    Mike

    Hi,
    Thank you.
    If we close this, and you find you have more questions on this issue you would need to open a new ticket. We can leave it open if you wish. If you have questions on other issues please open a new ticket for each issue.
    If you want to leave this open, then there is no need to reply back, it will stay open.
    Thanks for using Enfold.

    Best regards,
    Mike

    January 18, 2020 at 8:45 pm #1175903
    zizibe1

    Hi,

    After updating Enfold from version 4.7 to version 4.7.1, the code <span class=”red-dot”>⬤</span> in the caption of the Fullscreen Slider on the frontpage of my website doesn’t work anymore.

    I’ve changed Enfold back to the old version 4.7 via FTP. Now the code works again.

    How can make the code work in the new version 4.7.1 of Enfold?

    Best regards,

    zizibe1

    January 18, 2020 at 9:20 pm #1175905
    Mike

    Hi,
    Please try replacing \enfold\config-templatebuilder\avia-shortcodes\av-helper-slideshow.php with this file via FTP. Please save a fallback copy of your old file.
    If you are not comfortable with doing this please include FTP access in the Private Content area so we can assist.

    Best regards,
    Mike

    January 18, 2020 at 11:37 pm #1175937
    zizibe1

    Hi Mike,

    Nice to hear from you.

    I updated Enfold to version 4.7.1 and replaced the „av-helper-slideshow.php“ file with your file via FTP.

    Now the code in the caption of the Fullscreen Slider works again. Thank you very much for your support.

    From now on, do I have to replace the „av-helper-slideshow.php“ file with your file each time I update Enfold to a new version?

    Best regards,

    zizibe1

    January 19, 2020 at 12:04 pm #1175977
    Mike

    Hi,
    Glad to hear, you won’t have to do this again, it was an error.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    January 19, 2020 at 2:36 pm #1176000
    zizibe1

    Hi Mike,

    Thank you for your reply.

    In the future, if I have a question, is there a way to contact you directly via this platform?

    Best regards,

    zizibe1

    January 19, 2020 at 3:14 pm #1176010
    Mike

    Hi,
    Sorry, we don’t have a way to do that.
    Shall we close this thread then?

    Best regards,
    Mike

    January 19, 2020 at 4:30 pm #1176018
    zizibe1

    Hi Mike,

    No problem. You can close this thread now.

    Have a nice day.

    Best regards,

    zizibe1

    January 19, 2020 at 6:07 pm #1176029
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Symbol in caption of Fullscreen Slider and Text Block’ is closed to new replies.