[Anonymous]

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]

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]

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]

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

[jamesauble]

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

Thx.

[serkan]

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]

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]

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]

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]

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]

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]

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]

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

[serkan]

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]

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]

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]

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]

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

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

Thanks

[jamesauble]

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]

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