Mobile label Alignment

I want the contact us form to be part of the footer. I managed to do it for the desktop version but for the mobile version, the label will be on top of the input box. Is there a way to do a shortcode switch where if it is mobile use the contact form from above

Code for the footer contact form

[uacf7-row ][uacf7-col col:2]
    <label id="name">Name</label>
    <label id="phone">Phone</label>
    <label id="email">Email</label>
    <label id="division">Division</label>
    <label id="message">Message</label>
[/uacf7-col]
[uacf7-col col:6]
    [text* text-961]
    [tel* tel-323]
    [email* your-email autocomplete:email]
    [text* text-692]
    [textarea* textarea-290]
    [submit "Submit"]
[/uacf7-col][/uacf7-row]

    .wpcf7 input[type=submit] {

        font-size: 16px;
        font-weight: bold;
        border: 0 none;
        cursor: pointer;
        width: 70%;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
    }
br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Code for the contact form that is not in the footer

[uacf7-row][uacf7-col col:12]
<label> Name[text* your-name autocomplete:name] </label>

<label> Phone [tel* tel-988] </label>

<label> Email[email* email-414] </label>

<label> Division [text text-242]</label>

<label> Message [textarea* textarea-467] </label>
[submit "Submit"]
[/uacf7-col][/uacf7-row]

    .wpcf7 input[type=submit] {

        font-size: 16px;
        font-weight: bold;
        border: 0 none;
        cursor: pointer;
        width: 70%;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
    }
br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

View post on imgur.com

The footer code

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"30%","layout":{"type":"default"}} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:html -->
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Contact Us</h2>
<div class="wp-block-group">
                

                [contact-form-7 id="2c5ab04" title="Contact Us"]
              

            </div>
<!-- /wp:html --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} -->
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Architecture</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"Products","url":"#"} /-->

<!-- wp:navigation-link {"label":"Resources","url":"#"} /-->

<!-- wp:navigation-link {"label":"Projects","url":"#"} /-->

<!-- wp:navigation-link {"label":"About us","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact us","url":"#"} /-->

<!-- wp:navigation-link {"label":"Order Form","url":"#"} /-->

<!-- wp:navigation-link {"label":"Warranty Form","url":"#"} /-->

<!-- wp:navigation-link {"label":"Brochures","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} -->
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Steel Framing</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"Products","url":"#"} /-->

<!-- wp:navigation-link {"label":"Resources","url":"#"} /-->

<!-- wp:navigation-link {"label":"About Us","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact Us","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:heading {"className":"has-medium-font-size","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontFamily":"body"} -->
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Structural Steel</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"Products","url":"#"} /-->

<!-- wp:navigation-link {"label":"Resources","url":"#"} /-->

<!-- wp:navigation-link {"label":"About us","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact us","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

I tried direct injection and using wpcode shortcode injection and none of it works

     function replace_shortcode_on_mobile($content) {
    if (wp_is_mobile()) {
        $content = str_replace('[contact-form-7 id="2c5ab04" title="Contact Us"]', '[contact-form-7 id="6dd7b2c" title="Testing"]', $content);
    }
    return $content;
}
add_filter('the_content', 'replace_shortcode_on_mobile');

• This topic was modified 7 months, 1 week ago by justanothertechbro.
• This topic was modified 7 months, 1 week ago by justanothertechbro.
• This topic was modified 7 months, 1 week ago by justanothertechbro.

The page I need help with: [log in to see the link]