I have a Shopify product page where I want to display an image next to a description "box" of the product. The description box contains the product name, description, buy now button etc. The image is on the left, the description box to the right on a desktop.
The image and the description box need to be side by side, as well as mobile responsive obviously with the description box moving below the image on mobile.
Some products may have longer descriptions than others so the DIV description box will have to grow/shrink with the content.
I have this setup in a fashion using <strong><em>flexbox</em></strong>. When the description is very short, the description box is the same size as the image with a background color fill. But when the description is longer, the description box grows to fit the content, but the image doesn't scale with it. See images below.
How do I get the image to scale with the content? I dont mind if the image is cropped at the edges if it grows.
Image with a short description - image fits.
<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>
Image with a longer description - the image doesn't fit.
<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>
<strong>HTML</strong> - irrelivant code removed for brevity
<strong>CSS</strong>
Secondly, the flex boxes aren't responsive.
How do I set it so that when the page is viewed on mobile, the description box moves below the image? I have tried setting the media query to <em>display: relative</em> for <em>.product-details-row</em>, but this didn't work.
How the mobile view currently looks.
<a href=" " rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ud3m.png" alt="enter image description here"></a>
The image and the description box need to be side by side, as well as mobile responsive obviously with the description box moving below the image on mobile.
Some products may have longer descriptions than others so the DIV description box will have to grow/shrink with the content.
I have this setup in a fashion using <strong><em>flexbox</em></strong>. When the description is very short, the description box is the same size as the image with a background color fill. But when the description is longer, the description box grows to fit the content, but the image doesn't scale with it. See images below.
How do I get the image to scale with the content? I dont mind if the image is cropped at the edges if it grows.
Image with a short description - image fits.
<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>
Image with a longer description - the image doesn't fit.
<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>
<strong>HTML</strong> - irrelivant code removed for brevity
Code:
<div class="product-details-row">
<div class="product-details-column"><!-- Image here -->
<img class="product-details-image" src="https://pmcvariety.files.wordpress.com/2018/01/carey-mulligan1.jpg?w=700" />
</div>
<div class="product-details-column product-details-right"><!-- Product details here -->
<h3 class="product-name">{{ product.title }}</h3>
<div class="product-gallery-heading">
{{ ImagsGallaryheading[imagesgallaryheading] }}
</div>
<section class="price-and-reviews-row">
<div style="width: 50%; height: auto;float: left;">
<span>
<p class="product-content-box-price">
<span>{{ current_variant.price | money }}</span>
</p>
</span>
</div>
<section>
<p class="product-hero-image-content-box">{{ product.description }}</p><!-- Product details grows/shrinks here -->
</section>
</section>
<hr style="display: block; height: 1px; border: 0; border-top: 1px solid rgba(215,215,215,0.5); margin: 1em 0; padding: 0;">
<p class="color-box available-from">Available colours:</p>
<div class="color-square-container green-color-square"></div>
<div class="color-square-container blue-color-square"></div>
<div class="btn_banner">
<div class="button-buy">
<!-- N/A content removed -->
</div>
</div>
</div><strong>CSS</strong>
Code:
.product-details-row {
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
margin-bottom:2.5em;
}
.product-details-column {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
img.product-details-image {
display:block;
max-width:100%;
height:auto;
width:auto;
}
.product-details-right {
background-color:#C15031;
padding:2em;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
color:#ffffff;
}
.product-gallery-heading {
font-family:Comfortaa;
color:#d7d7d7;
}
.price-and-reviews-row {
margin-top: 4em;
margin-bottom: 2em;
}
p.product-content-box-price {
color: #ffffff;
font-size: 2em;
font-weight: 400;
}
p.product-hero-image-content-box {
color:#333333;
font-family:Arial;
font-weight:300;
}
.available-from {
color:#ffffff;
font-family:Comfortaa;
font-weight:400;
font-size:0.8em;
}
.color-square-container {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid #ffffff;
}
.green-color-square {
background: #009966;
}
.blue-color-square {
background: #ab3fdd;
}Secondly, the flex boxes aren't responsive.
How do I set it so that when the page is viewed on mobile, the description box moves below the image? I have tried setting the media query to <em>display: relative</em> for <em>.product-details-row</em>, but this didn't work.
How the mobile view currently looks.
<a href=" " rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ud3m.png" alt="enter image description here"></a>