Contact page mobile

Hello,

I found this code on your page

body.page-id-13 .your-name input[type="text"] {
  max-width: 560px;
}
body.page-id-13 .your-email input[type="email"] {
  max-width: 560px;
  margin-left: 579px;
  position: relative;
  top: -60px;
}
body.page-id-13 .your-subject input[type="text"] {
  position: relative;
  top: -60px;
}
body.page-id-13 .your-message textarea {
  position: relative;
  top: -58px;
}
body.page-id-13 .siteorigin-widget-tinymce p input[type="submit"] {
  position: relative;
  top: -65px;
}

Please remove that since this is causing the misbehaviour on mobile pages. In general you have to be careful with fixed widths, huge margins and that kind of positioning. This will never work properly on mobile devices.

Instead use this CSS to achieve the same layout as you got before

@media only screen and (min-width: 768px) {
  .wpcf7-form p:nth-of-type(1) {
    padding-right: 1%;
  }
  .wpcf-7-form p:nth-of-type(2) {
    float: left;
    padding-left: 1%;
  }
  .wpcf7-form p:nth-of-type(1), 
  .wpcf7-form p:nth-of-type(2) {
    display: inline-block;
    width: 50%;
  }
}

Please let me know when you have done this and whether there still might be an issue.

? That’s right, so I asked for your support.
? I added the codes. Two lines again.

I missed one thing, please change the code I gave you with this

@media only screen and (min-width: 768px) {
  .wpcf7-form p:nth-of-type(1) {
    padding-right: 1%;
  }
  .wpcf7-form p:nth-of-type(2) {
    padding-left: 1%;
  }
  .wpcf7-form p:nth-of-type(1), 
  .wpcf7-form p:nth-of-type(2) {
    float: left;
    display: inline-block;
    width: 50%;
  }
}

Furthermore to reduce the space after the button, remove

.wpcf7 .button, 
.wpcf7 input[type="button"], 
.wpcf7 input[type="reset"], 
.wpcf7 input[type="submit"] {
  margin-bottom: 80px;
}

You might want to add this to change the spacing from the send/warning text.

div.wpcf7-response-output {
  margin: 10px 0;
}

• This reply was modified 6 years, 7 months ago by terrathemes.
• This reply was modified 6 years, 7 months ago by terrathemes.

? All right, very good.

? Label padding settings (15px)

mobil tel: 0542 314 13 41 How do I edit it?

$contact = ”;
if ( get_theme_mod(‘tel’, ‘111.222.333’) != ” ) {
$contact .= “<span class=’tel’>” . esc_html(get_theme_mod(“tel”, “+1 (0) 999-000”)) . “</span>”;
}

If you post code in here, you may use the code button above the textfield to wrap your inside of single back-quotes.

Do you want to remove the icon and instead write “mobil tel:”? This is not clear.

In general, if you use a child theme, which you should if you modify the theme code inside the files, you can copy the complete function to your functions.php inside the child theme and modify it there. Then your own edits still remain after the parent theme gets updated.

/**
 * Topbar
 * from /meteorite/inc/functions/functions-header.php
 */
if ( ! function_exists('meteorite_nav_topbar') ) :
function meteorite_nav_topbar() {
	if ( get_theme_mod('topbar_type', 'none') != 'none' ) {

		$claim = '';
		if ( get_theme_mod('claim', 'Display your clame here.') != '' ) {
			$claim .= "<span class='claim'>" . esc_html(get_theme_mod("claim", __("Display your claim here.", 'meteorite'))) . "</span>";
		}
		$contact = '';
		if ( get_theme_mod('tel', '111.222.333') != '' ) {
			$contact .= "<span class='tel'>" . esc_html(get_theme_mod("tel", "+1 (0) 999-000")) . "</span>";
		} 
		if ( get_theme_mod('email', '[email protected]') != '' ) {
			$contact .= "<a href='mailto:" . antispambot(sanitize_email(get_theme_mod('email', '[email protected]'))) . "'><span class='email'>" . antispambot(sanitize_email(get_theme_mod('email', '[email protected]'))) . "</span></a>";
		}
		$social = '';
		if ( get_theme_mod('social-media-one', 'www.facebook.com') != '' ) {
			$social .= "<li><a href='" . esc_url(get_theme_mod('social-media-one', 'www.facebook.com')) . "' target='_blank'></a></li>";
		}
		if ( get_theme_mod('social-media-two', 'plus.google.com') != '' ) {
			$social .= "<li><a href='" . esc_url(get_theme_mod('social-media-two', 'plus.google.com')) . "' target='_blank'></a></li>";
		}
		if ( get_theme_mod('social-media-three', 'www.youtube.com') != '' ) {
			$social .= "<li><a href='" . esc_url(get_theme_mod('social-media-three', 'www.youtube.com')) . "' target='_blank'></a></li>";
		}
		if ( get_theme_mod('social-media-four', 'twitter.com') != '' ) {
			$social .= "<li><a href='" . esc_url(get_theme_mod('social-media-four', 'twitter.com')) . "' target='_blank'></a></li>";
		}
		if ( get_theme_mod('social-media-five', 'linkedin.com') != '' ) {
			$social .= "<li><a href='" . esc_url(get_theme_mod('social-media-five', 'linkedin.com')) . "' target='_blank'></a></li>";
		}
		if ( get_theme_mod('social-media-six', 'pinterest.com') != '' ) {
			$social .= "<li><a href='" . esc_url(get_theme_mod('social-media-six', 'pinterest.com')) . "' target='_blank'></a></li>";
		} ?>
		
		<div class="topbar">
			<div class="container">
				<div class="row">
					<?php if ( get_theme_mod('topbar_type', 'none') == 'topbar_1' ) { ?>
						<div class="contact-field contact-field-left col-md-8">
							<?php echo $contact; ?>
						</div>
						<div class="social-icons social-nav social-nav-right col-md-4">
							<nav>
								<ul>
									<?php echo $social; ?>
								</ul>
							</nav>
						</div>
					<?php } elseif ( get_theme_mod('topbar_type', 'none') == 'topbar_2' ) { ?>
						<div class="social-icons social-nav social-nav-left col-md-4">
							<nav>
								<ul>
									<?php echo $social; ?>
								</ul>
							</nav>
						</div>
						<div class="claim-field claim-field-right col-md-8">
							<?php echo $claim; ?>
						</div>
					<?php } elseif ( get_theme_mod('topbar_type', 'none') == 'topbar_3' ) { ?>
						<div class="contact-field contact-field-left col-md-6">
							<nav>
								<?php echo $contact; ?>
							</nav>
						</div>
						<div class="claim-field claim-field-right col-md-6">
							<?php echo $claim; ?>
						</div>
					<?php } elseif ( get_theme_mod('topbar_type', 'none') == 'topbar_4' ) { ?>
						<div class="topbar-nav topbar-nav-left col-md-8">
							<nav>
								<?php if ( has_nav_menu('topbar') ) {
									wp_nav_menu( array('theme_location' => 'topbar', 'menu_id' => 'topbar-menu', 'depth' => 1 ) ); ?>
								<?php } ?>
							</nav>
						</div>
							<div class="social-icons social-nav social-nav-right col-md-4">
							<nav>
								<ul>
									<?php echo $social; ?>
								</ul>
							</nav>
						</div>
					<?php } ?>
				</div>
			</div>
		</div>
		<?php
	}
}
endif;

Hi,

? The icon will be, only the wire number will be integrated.

? Application between the fingernails, but there is wrong, the icon does not appear and does not work.

$contact = '';
		if ( get_theme_mod('tel', '111.222.333') != '' ) {
			$contact .= "<span class='tel:+9005423141341'>" . esc_html(get_theme_mod("tel", "+90 542 314 13 41")) . "</span>";
		}

Now I may understand. You want that the telephone number is clickable? That a call gets startet on click?

Yes that’s exactly what I wanted ??

Then this is the code you need change inside the function.

$contact = '';
if ( get_theme_mod('tel', '111.222.333') != '' ) {
  $contact .= "<a href='tel:+9005423141341'><span class='tel'>" . esc_html(get_theme_mod("tel", "+1 (0) 999-000")) . "</span></a>";
}

Please let me know if you need any further instructions to implement this.

It works, it is very nice … But there is no icon. “padding” and color changed.

Somehow the span tag isn’t recognized anymore, therefore we need some workaround for that. This should do the trick.

.topbar a:nth-child(1) {
  color: #fff;
  display: inline-block;
  padding: 10px 15px 10px 0;
}

.topbar a:nth-child(1)::before {
  content: "\f10b";
  display: inline-block;
  font-family: "FontAwesome";
  font-size: 24px;
  line-height: 0;
  padding: 0 10px 0 0;
  position: relative;
  top: 2px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

Thanks was good ??

Contact page, footer contact info

Please install the Simple Custom CSS and JS plugin and use this JS code to change the normal telephone number to a clickable one.

jQuery(function($) {
  if ( $('.meteorite-contact-info').length ) {
  	$(this).find('.contact-phone').html('<span><i class="fa fa-phone"></i></span><a href="tel:+9005423141341">0 542 314 13 41</a>');
  }
});