40jili net casino.Claim Your Free 999 Pesos Bonus Today

Resolved

(@justanothertechbro)

I am trying to hide the form that I created using contact form 7 based on screen size. The one used in the footer. Basically the idea is the current footer one will only appear on desktop screen size and the body form will appear when mobile screen size is detected

View post on imgur.com

Footer code in case it will help

<!-- 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 -->

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

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

Viewing 1 replies (of 1 total)

Thread Starter

justanothertechbro

(@justanothertechbro)

7 months, 1 week ago

Finally resolved it with this 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:group {"layout":{"type":"constrained"},"blockVisibility":{"controlSets":[{"id":1,"enable":true,"controls":{"screenSize":{"hideOnScreenSize":{"small":true,"extraSmall":true}}}}]}} -->
        <div class="wp-block-group">
          <!-- wp:html {"blockVisibility":{"controlSets":[{"id":1,"enable":true,"controls":{"screenSize":[]}}]}} -->
          <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:group -->
  
        <!-- wp:group {"layout":{"type":"constrained"},"blockVisibility":{"controlSets":[{"id":2,"enable":true,"controls":{"screenSize":{"hideOnScreenSize":{"medium":true,"large":true,"extraLarge":true}}}}]}} -->
        <div class="wp-block-group">
          <!-- wp:html {"blockVisibility":{"controlSets":[{"id":2,"enable":true,"controls":{"screenSize":[]}}]}} -->
          <h2 class="wb-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="6dd7b2c" title="Testing"]
          </div>
          <!-- /wp:html -->
        </div>
        <!-- /wp:group -->
      </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","blockVisibility":{"controlSets":[{"id":1,"enable":true,"controls":{"screenSize":[]}}]}} -->
            <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 -->

Viewing 1 replies (of 1 total)

The topic ‘Hide contact form 7 using block visibility’ is closed to new replies.