Issues updating contact page

  • Posted in : Empathy
  • Anonymous
    Inactive
    9 August 2016 at 14:48
    #43074

    Hi there,
    I’m trying to update the contact page but having several issues. Here’s the site I’m working on: http://wordling.co.uk/#/contact.

    Please can you help with the following…
    1. I removed some items from the Reach Me section (telephone number, Freelance available) but now they are left aligned. How can I center align them?
    2. The email address text is longer than in the demo and the text does not wrap correctly. How can I correct this? (I tried changing [column width="3" width_xs="6"] but it didn’t work).
    3. Map doesn’t load, I get the error message ‘Oops! Something went wrong’ (I didn’t change anything, it just didn’t work when I uploaded the demo pages to my site.
    4. Contact page background is a strange colour (although it should be covered by the map). Is theis colour because of it’s position in the menu?

    Thanks a lot for your help,
    Strak

    serkan
    Moderator
    10 August 2016 at 00:25
    #43083

    Hi Strak
    You should update the row shortcode from 3 to 6 which means you have 2 items. Please check the col shortcodes in the documentation.
    I would recommend you to update the theme. Then you can check how to get api key for your contact page.
    https://developers.google.com/maps/documentation/javascript/get-api-key
    You probably deleted some necessary part of code that is why it is not covered.
    Just update the theme, then try to upload the dummy data for contact page again, delete step by step and check it by the way if it is going well
    Thanks

    jamesauble
    Participant
    6 October 2017 at 07:54
    #50770

    I had the same issues but worked most of them out, only remaining issue is that my contact info doesn’t look very nice or vertically aligned with the icons.

    See: https://puu.sh/xRbfP/bb25486c67.png

    Because I removed two of the contact methods, I fixed the open space issue by creating 2 more columns for the text, so each icon and piece of text has its own column (4 all together).

    I’m okay exploring css options for fine tuning but don’t know where to start with that.

    Thanks!

    serkan
    Moderator
    7 October 2017 at 20:14
    #50797

    Hi,
    Could you provide me your related url, please?
    Thanks

    jamesauble
    Participant
    8 October 2017 at 05:36
    #50798

    Yes, http://www.jamesauble.com.

    Thx.

    serkan
    Moderator
    8 October 2017 at 16:05
    #50801

    Hi,
    You can try to use this custom css code;

    @media screen and (min-width: 768px) { #contact .fun-fact h4 { margin-left: 20px; padding-top: 24px; } }

    Thanks

    jamesauble
    Participant
    9 October 2017 at 07:26
    #50817

    Thanks, That did fix the alignment issues on my large screen, but as the screen gets smaller, the fun_fact text falls off horizontally cenetered alignment with it’s corresponding icon and on smaller screen ever crowds space and overlaps before eventually dropping down under the icon. Is there a way I can:

    1) Force the fun fact text to always horizontally center with the icon

    and

    2) Drop below the icon before overlapping?

    thx

    serkan
    Moderator
    9 October 2017 at 16:03
    #50823

    Hi James,
    Could you try to set up the column to 6. When I inspect the codes, I can see that it set up 1 column so that is why it is overlapping each other.
    If you can not make it, provide me your wp-admin details via our contact form and add this topic url as well.
    col-sm-6 col-md-6 col-lg-6
    Thanks

    CCote
    Participant
    27 October 2017 at 20:54
    #51015

    Hi there, I love this theme and see you guys are great at responding to questions. This forum has been helpful. Thank you!

    I’d like to make some changes to the contact page. Even with the white text, it’s not enough contrast; can I put a transparent box (say, grey/50% black) behind the text?

    Or could I further ‘fade’ the background map?

    I wasn’t able to customize the map pin so I just removed it… how do I put it back?

    http://cote.digital/#/contact

    Thanks for your help!

    serkan
    Moderator
    28 October 2017 at 11:55
    #51025

    Hi,
    You can play on the color and contrast of the map in the following way;

    .map:after { background: rgba(0, 0, 0, 0.75); }

    Go to pages and edit the contact page.
    You can add the Image address at the end of the map shortcode. It will look like the example;
    [map latitude=”-25.363882″ longitude=”131.044922″ zoom=”5″ image=”http://themes.pixelwars.org/empathy/demo/wp-content/uploads/2015/07/marker.png”%5D
    Thanks

    jamesauble
    Participant
    1 November 2017 at 04:52
    #51061

    After some tweaking I fixed some of the alignment issues by changing column sizes, I’m still having two issues with the contact page in the contact method fun facts:

    1) at width 366 the icons and text collapse onto each other

    and

    2) at width 766 and below the two fun facts seem to be aligned left instead of centered. I’d like them centered.

    Any help would be appreciated. Thanks!

    serkan
    Moderator
    1 November 2017 at 12:06
    #51066

    Hi jamesauble,
    You can try to use this custom css code;

    @media screen and (max-width: 768px) {
#contact .fun-fact { clear: left; } }

    If you only use 2 icons, set the column shortcode to 6. Since you set them 3 to 3, they seem to be based on the left.
    Thanks

    jamesauble
    Participant
    1 November 2017 at 18:45
    #51071

    Which width shortcode? switching any to 6 sends the icon off alignment with the text.

    serkan
    Moderator
    2 November 2017 at 12:38
    #51077

    Hi,
    Could you try to use it like this;

    [row]
    [column width="6" width_xs="6"]
    [fun_fact]

    [icon name="pe-7s-call"]
    <h4>SKYPE:JAMES.AUBLE2 [at] GMAIL.COM</h4>
    [/fun_fact]
    [/column]
    [column width="6" width_xs="6"]
    [fun_fact]

    [icon name="pe-7s-mail"]
    <h4>CONTACT [at] JAMESAUBLE.COM</h4>
    [/fun_fact]
    [/column]
    [/row]

    jamesauble
    Participant
    7 November 2017 at 09:37
    #51119

    Okay great, it is playing nicer now at big and medium resolutions, but now when you get at sub-500 width the two fun facts don’t stack as they should and the contact info falls off the margins.

    serkan
    Moderator
    7 November 2017 at 13:44
    #51127

    Hi,
    We can fix the margins by changing the font size. Note : its just for the mobile view.

    @media screen and (max-width: 767px) { #contact .fun-fact p { font-size: 9px; } }

    Thanks

    jamesauble
    Participant
    7 November 2017 at 13:55
    #51128

    Perfect! One more thing… the body field of the contact form doesn’t fill the full width like the name and email input boxes do. Is there an easy CSS fix for this?

    serkan
    Moderator
    7 November 2017 at 14:04
    #51129

    Hi, The Jetpack plugin has corrupted this. You can fix it with the following custom css code;

    .contact-form textarea { width: 100%; }

    Thanks

    jamesauble
    Participant
    8 November 2017 at 05:09
    #51140

    Great. worked. Also have a question about the main menu. I removed the ‘resume’ item from Appearance > Menus, but the item remains in the menu. How do I go about removing this?

    thanks.

    serkan
    Moderator
    8 November 2017 at 14:25
    #51153

    Hi,
    Please go to appearance > widgets > empathy template page > delete the resume page as well.
    Thanks

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

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

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