Question 2546 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I change the layout of a WordPress child theme page?

I am new to WordPress. I have Woocommerce website. The product page is a Kaffa child theme. It has an image and under the image it has form of buttons and inputs.

I want to change layout of this page to be image on right and on the left will be the form.

How code is now:

<div class="row centeres">
  <div class="col-xl-9 col-lg-12 col-xs-12">
    image & form 
  </div>
</div>

Desired result:

<div class="row">
  <div class="col-md-6"> image</div>
  <div class="col-md-6">form</div>
</div>

How I can do that

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it using flexbox:

    row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex: 0 0 100%;
}

div.col-md-6 {
  flex: 1;
}
    <div class="row">
  <div class="col-md-6"> image</div>
  <div class="col-md-6">form</div>
</div>


  2. 0

    You can try adding a float: right; to your image container. This will ultimately depend on how your theme is set up:

    .woocommerce div.product div.images.woocommerce-product-gallery {
    float: right;
}

    On the Kaffa demo site this is the result (assuming again that this is the same theme you mention):

    https://snipboard.io/TNSmVv.jpg

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search