I'm trying to make a nicer-looking eCommerce page for products by adding the product image at the top and stretching it to take up the full width of the screen when you land.
Unfortunately, I can change the padding and other styles on the image, but I cannot change the size. I don't know why this is, can anyone help me? My code is pasted below.
< htmlData>
< ![CDATA[
< html>
< head>
< style>
.container {
width: 100%;
}
.container img {
# This change applies
padding: 20px;
# This change does not apply
width: 100% !important;
}
< /style>
< /head>
< body>
# This is the image container
< div class="container">
]]>
< /htmlData>
# This is normal XML now, calling the product image
< img>
< t t-call="website_sale.shop_product_carousel"/>
< /img>
# Closing the tags and continuing the html
< htmlData>
< [!CDATA[
< /div>
...
I can provide screenshots as needed. Any help would be very appreciated! I have no previous knowledge of XML, so this is a bit tricky for me.Thanks
