I have a product page which currently contains two parts: image at the right and some summary at the left. However, I am not happy with this alignment and would like to take the summary part and switch the alignment with the image, resulting the summary part at the right and the image at the left. I checked with the inspect tool and found out that the summary part has this div class: summary.entry-summary
and the image part has this div class: div.woocommerce-product-gallery_image
. Any ideas how to do this ?
EDIT: OK, I managed aligning the summary part like this: however I still can’t manage aligning the image.
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
width: 100%
}
EDIT 2: OK, I now managed to align the image right with a different div class like this:
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
float: left;
}
the problem is the summary is now below the image…
EDIT 3: OK, I managed fixing everything by just deleting
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
width: 100%
}
Thank you everyone !!
2
Answers
OK, my final code is this:
Use floats or left, right and center attributes in HTML.