Text alignment issue with process / contact icons and text

  • Posted in : unRovr
  • uxer55
    Participant
    28 January 2019 at 19:14
    #57655

    Hi,

    I am having an issue with the out-of-the-box contact info widget on the Contact page as well as the process widgets on the About Me page.

    Here are the screenshots:

    https://imgur.com/a/9PTbPNo

    https://imgur.com/eQNacag

    Is there a way to make sure text is aligned?

    Thank you

    serkan
    Moderator
    30 January 2019 at 13:47
    #57672

    Hi, We have made it in terms of having it differ. You can fix it with the following custom css code.

    .elementor-column:first-child .process img, .elementor-column:last-child .process img {
    width: 100%; margin-left: 0%; margin-top: 0px; }

    Also, you can decrease the h4 width with this custom css code;

    .fun-fact h4 { max-width: 130px; }

    Thanks

    uxer55
    Participant
    31 January 2019 at 19:39
    #57709

    I appreciate the help, however I am still having the issue.

    I entered the two code snippets and the text and icon in the middle is still overflowing the icon on the right side (the email address and icon in the previous screenshot). How can I fix this?

    Also, now with the new code, the phone number on the right side breaks to two lines. I would like to have it stay on one line.

    Thank you

    P.S. I am entering the code snippets on the “advanced > custom css” tab of the elements within the “edit with elementor” page.

    serkan
    Moderator
    2 February 2019 at 16:48
    #57733

    Hi,
    Please check out your additionally css box;
    https://www.pixelwars.org/forums/topic/how-to-use-custom-css-for-wordpress-themes/
    Thanks

    uxer55
    Participant
    5 February 2019 at 05:41
    #57769

    Thank you for your help. I have now included all the CSS .

    I am encountering a responsive issue, however. The process elements do not stack well. Please see the screenshot below:

    https://imgur.com/EA4e0Oq

    How can I fix this?

    Thanks

    serkan
    Moderator
    7 February 2019 at 13:08
    #57797

    Hi,
    Could you check out our demo website? Does it have the same issue as well?
    When you customize the icons, you could delete something maybe.
    Thanks

    uxer55
    Participant
    10 February 2019 at 19:04
    #57855

    You are right, the demo site’s process widget works perfectly when resizing the browser.

    However, that appears to be because the demo site has a limited character length and 6 process icons. I have slightly more characters to describe each icon in the process. I also changed it to 4 icons rather than 6.

    Do we have to use 6 icons and a short text length in order for this widget to work responsively? Is there a fix for this?

    I appreciate your help

    serkan
    Moderator
    11 February 2019 at 00:46
    #57861

    Hi,
    Could you have made a word or shortcode error?
    It does not seem to be a problem with its default style. Would you share the url again?
    Thanks

    uxer55
    Participant
    11 February 2019 at 16:01
    #57868

    Hi,

    I have not used any shortcodes. I did use a few lines of CSS that you gave to me above, but that is it. Otherwise, it is exactly the imported demo but with different text and less icons.

    The site is private but I will send you the login credentials.

    Thank you for your help.

    serkan
    Moderator
    13 February 2019 at 01:57
    #57891

    Hi,
    Could you try to use this custom css code, please?

    @media screen and (max-width: 767px) {
.elementor-col-25 { width: 50%; } }

    Thanks

    uxer55
    Participant
    13 February 2019 at 19:59
    #57916

    Hi,

    Thanks for the additional css. I added it in and it solved one problem but there are still other issues.

    Please check out the image here: https://imgur.com/a/uSEjaHI

    The text overlaps the elements above/below it. Also, it doesn’t make sense for the line to be there like this. The second element looks like it is just pointing off the page. The whole thing seems off. I had one of your other themes a few years ago and it worked perfectly. It was the cvCard theme. Is there a way to just take the process widget from cvCard and use it here? Or is there some more code that can make this look good?

    I appreciate your help.

    serkan
    Moderator
    17 February 2019 at 02:15
    #57943

    Hi,
    Can you use these custom css codes;

    @media screen and (max-width: 767px) {  .process h4 { margin: 10px 0 0; font-size: 10px; }
.process:after { display: none; } }

    Thanks

    uxer55
    Participant
    19 February 2019 at 16:47
    #57978

    Thanks, that helps.

    One other issue, how do I remove the background circle colors from the starting and ending icons?

    Image: https://imgur.com/rSknX3I

    It is causing a text misalignment where the 1st and 4th elements are lower than the 2nd and 3rd.

    Thanks

    serkan
    Moderator
    21 February 2019 at 01:38
    #58001

    Hi,
    You can use these custom css codes;

    .row>div:first-child .process, .elementor-column:first-child .process, .row>div:last-child .process, .elementor-column:last-child .process { background: none; }

    Thanks

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
unRovr - Animated vCard WordPress Theme
Login and Registration Log in · Register