[bayneParticipant]

Hello,

I am having an issue with the width of my form. I would like it to mimic the size of the image directly above it. At the moment the image is responsive, and the form remains full width (set at 500px). Is there a way for this to be fixed (ie. have the contact form and image resize in the same way on different screens)? Attached are examples of what I am experiencing.

Thanks!

[bayneParticipant]

This reply has been marked as private.

[bayneParticipant]

This reply has been marked as private.

[bayneParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Bayne,

Thanks for writing in!

#1: In regard to your question about contact form 7, you are adding the form and the image in the Revolution Slider. Revolution Slider adjusts the layer sizes on its own so it’s not easily possible to have two different kind of layers (image and contact form) act in a same way responsively. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

#2: To insert phone number and email in the navbar, add following code in your child theme’s functions.php file:

// Adding Second Row to Logobar
// =============================================================================

add_action('x_after_view_global__brand', 'ph_besides_logo');

function ph_besides_logo() { 
  $logo_nav_layout = x_get_logo_navigation_layout();
  // if ( $logo_nav_layout == 'stacked' ) {
  echo '<div class="logo_with_text"><span class="phone">123-456-789</span> <span class="email">example@example.com</span></div>';
  // } 
}

Replace 123-456-789 with your phone number and example@example.com with your email address from the code. Then, add following CSS under Custom > CSS in the Customizer:

.logo_with_text {
    color: #fff;
    float: right;
    font-size: 20px;
    margin-top: 24px;
}

.logo_with_text span.email:before {
    content: '| ';
}

Thank you!

[bayneParticipant]

Hi guys,

That code worked perfectly! Thank you so much! I have a few additional questions regarding the layout of the phone and email:

1. Is it possible to stack the email above the phone number?
2. Is it possible to make the email have a hyperlink that opens default mail application?
3. Is it possible to get rid of the hamburger menu that appears during reduced window size (see attached image)?

Thank you all for being so awesome!

[bayneParticipant]

On a side note,

I seemed to have fixed the responsive Contact Form 7 issue. Here are the details for anyone else who might be looking for the same fix:

First, I found some code online after googling around, and added to my child theme .css file:

/*—————————–
02 Making WordPress Contact Form 7 Plugin form responsive and full width with CSS customization
03 Add this code snippet to your WordPress theme’s style.css file.
04 ——————————-*/
05 div.wpcf7 .wpcf7-form-control {
06 max-width: 95%;
07 }
08
09 /* Make Contact Form 7 Select Dropdown field responsive & full width */
10 .wpcf7 select {
11 background-color: #fff;
12 border: 1px solid #ccc;
13 border-radius: 3px;
14 margin: 0;
15 padding: 4px;
16 text-indent: 0px;
17 width: 100%;
18 z-index: 100;
19 }
20 /* Make Contact Form 7 text field full width & responsive */
21 .wpcf7-text {
22 width: 100%;
23 }
24
25 /* Some additional CSS customization to the whole Contact Form 7 form */
26 div.wpcf7 {
27 background-color: #f5f5f5; /* Adds background color */
28 border: 2px solid #eee; /* Adds a form border */
29 padding:20px 10px 10px 10px;
30 -webkit-border-radius: 4px; /* Making form border rounded */
31 -moz-border-radius: 4px;
32 border-radius: 4px;
33 }

The code above took care of my responsive issue ((NOTE: only after I changed the properties of my Contact Form 7 layer in Slider Revolution from width: auto >TO> width: 400px (or whatever you would like the width to be)).

That seemed to work fine, but the “submit button” didn’t seem to want to play along, so I added this code in my Appearance>Customize>Custom>CSS area:

.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
width: 100%;
}

With those three edits (child theme .css file, slider revolution edit layer > change width from auto to specified px size, and the final code added to custom css field, everything is working perfectly now. I have my contact form off to the side in a desired position, other elements on the slider as well, and everything is responsive. YES! GO TEAM!

I hope someone else finds this post useful. I attached a couple of pics to show you guys how it looks.

Cheers!

[ChristopherModerator]

Hi there,

Thanks for sharing.

Please update your code to :

// Adding Second Row to Logobar
// =============================================================================

add_action('x_after_view_global__brand', 'ph_besides_logo');

function ph_besides_logo() { 
  $logo_nav_layout = x_get_logo_navigation_layout();
  // if ( $logo_nav_layout == 'stacked' ) {
  echo '<div class="logo_with_text"><span class="email"><a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Mail</a></span><span class="phone">123-456-789</span></div>';
  // } 
}

Please add the following code in Customize -> Custom -> CSS :

@media (max-width:767px){
span.phone, span.email {
    width: 100%;
    float: none;
    display: block;
}
.logo_with_text span.email:before {
    content: ' ';
}
}
a.x-btn-navbar {
    display: none !important;
}

Hope it helps.

[bayneParticipant]

Hi there,

It seems like some of the code worked, and some didn’t. I updated my functions.php file with the code provided above, however, both phone and email remain on the same line. I would like them to be stacked (one above the other). Please see the attached image for an example of what it’s looking like right now.

Thanks again for all you guys’ hard work!

[ThaiModerator]

Hi There,

Please try adding the following CSS:

.logo_with_text > span {
    display: block;
}
.logo_with_text {
    margin-top: 8px;
    text-align: right;
}

Hope it helps 🙂

[bayneParticipant]

That worked like a charm. Thank you!

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Have a great day! 🙂

[Author]

Posts