justanothertechbro

@threadi Thanks I will try that

@divyangposimyth essentially boss does not want to pay for the plugin so nothing to do :<

@janmtm thx

@divyangposimyth I talked my boss out of using the accordion so I guess it is semi-resolved

@threadi Just curious if there is plugins that take care of the leg work.

@threadi If you are referring this portion of the code since I don’t it being activated. Will add it back on. EDIT Weird adding the code back on work.

EDIT: Thanks for the help.

@media (max-width: 768px) {
    .wp-block-cover {
        min-height: auto;
    }
    .wp-block-cover__inner-container {
        flex-direction: column;
    }
    .main-content {
        display: flex;
        flex-direction: column;
    }
    .left-column, .right-column {
        padding: 20px;
        height: auto;
        width: 100%;
        box-sizing: border-box;
    }
    .left-column {
        order: 1;
    }
    .right-column {
        order: 2;
        justify-content: flex-start;
    }
    .content-sections {
        width: 100%;
        max-height: none;
    }
    .title {
        font-size: 36px;
        word-wrap: break-word;
    }
    .section-title {
        font-size: 24px;
    }
    .section-content {
        font-size: 16px;
    }
    /* Fix text overflow */
    .left-column, .right-column {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
}

• This reply was modified 1 year, 8 months ago by justanothertechbro.
• This reply was modified 1 year, 8 months ago by justanothertechbro.

@mdashikul I don’t think the plugin is causing the issue. I resolved it by creating a function and swap shortcode based on screensize but am happy to open a ticket

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