Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1304425
    Mastres
    Participant

    Hi i have two questions

    How can i align content in the middle of the the column vertically?

    And second, can i make this design with blocks elements? like the image

    #1304467
    Christian
    Moderator

    Hey there,

    That is possible with some inline CSS. Please add the code below in your page’s Cornerstone Custom CSS.

    .center-hv-container {
      position: relative;
      height:50vh;
    }
    .center-hv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .col-bg {
      background-size:cover;
      background-position:center;
    }

    Then do the following setup:

    1. Create a Section with no padding and with a 2 column Row.
    2. Disable the Column Container and enable the Marginless Columns option of the Row
    3. Assign the class center-hv-container to the columns
    4. Add a Button element to each column and assign each button with the center-hv class
    5. For the column with button and text, you should use the Text element and within it, the Button shortcode and your text. Assign the center-hv class to the Text element.

    For a visual guide, please see the screencast below:

    What do you mean by “blocks elements”? Are you referring to the Block Grid element? If so, the same technique above could be applied to it. However, you could not drag and drop elements to the block grid.

    Please take note that this is a demonstration of a possibility only and by no means a complete solution. If this does not meet your needs, you should hire a web developer to complete your design requirements for you. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

    Thanks.

  • <script> jQuery(function($){ $("#no-reply-1304425 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>