Contact Page: Color & Spacing

  • Posted in : Empathy
  • joshncampbell
    Participant

    1. How do you change the text color to white like in your demo?
    2. There is some strange spacing with the “Based in…” and email items. How can I fix that?
    http://www.joshuacampbell.me/#/contact

    serkan
    Moderator

    Hi,
    1. I just checked your url and the text color already white in your website.
    Appearance > Customize > Color > Text Logo Color choose white.
    2. Go to Appearance > Customize > Empathy Page Colors > Enabled Page Light Text for contact page.
    Thanks

    joshncampbell
    Participant

    Yeah I finally figured out the light text. What about the spacing issue? Under “Reach Me” the first and third icons look good but you’ll notice extra spacing with the text that does not happen with the second and fourth icon+text. How can I fix that?

    serkan
    Moderator

    Hi,
    After at you can add a line break by pressing enter in the content editor. You mail adress is a long sentences so it is being overflowed of the container.
    Thanks

    joshncampbell
    Participant

    Didn’t seem to help. I tried a line break and and it still has a line space above it so that it does not align with the icon. You can see it now.

    [column width="3" width_xs="6"]
    [fun_fact]
    [icon name=”pe-7s-mail”]
    joshua.campbell
    [at]icloud.com
    [/fun_fact]
    [/column]

    What about the “Based in…” icon and text? There is a gap between the two lines.

    [column width="3" width_xs="6"]
    [fun_fact]
    [icon name=”pe-7s-map-marker”]
    Based in Hattiesburg, MS
    [/fun_fact]
    [/column]

    serkan
    Moderator

    Hi,
    Use this custom css code;

    @media screen and (min-width: 1200px) { .fun-fact h4 { font-size: 11px; } }

    Thanks

    joshncampbell
    Participant

    When I added it to the existing code like this it worked:
    /* DESKTOPS MEDIUM */
    @media screen and (min-width: 1200px) {
    .blog-single .alignright, .blog-single .wp-caption.alignright {
    max-width: 68%; margin-right: -140px; margin-left: 2em;
    }
    .blog-single .alignleft, .blog-single .wp-caption.alignleft {
    max-width: 68%; margin-left: -140px; margin-right: 2em;
    }
    .fun-fact h4 {
    font-size: 12px;
    }
    }

    Thanks,
    Josh

    serkan
    Moderator

    Okay, i am happy that it worked. Good luck
    Thanks

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

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

License required for the following item
Login and Registration Log in · Register