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

manar mohammad 0
Viewed 33

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

layout wordpress-theming wordpress html
2 Answers

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

Whispar Design0

I solved it using flexbox

row{
    display: flex;
    width: 100%;
    flex-wrap:wrap;
    flex:0 0 100%;}
div.col-md-6{
    flex:1;}

manar mohammad0
Related