Brooklyn Theme: How to change the width of product photos automatically when switching from desktop

[Coffee-Exp]

Hey there,

I'm applying Brooklyn theme in my Shopify store and try to add several featured-row sections into the product page template.  Everything looks nice under the desktop mode.  However, when switching to mobile view, the width of product photo cannot be adjusted automatically so that there are two margins (i.e. the blue areas in the below screenshot).  I would like to know if there is a solution to make the width of the product photo being same as that of the column and its height is adjusted in proportion automatically.

Thank in advance for your help.

Best regards,

Coffee-exp

[elishaolade]

Hi,

I'm not familiar with the Brooklyn theme, but you may need to set the width of the product photo to 100% of the container.I don't know the specific class value for the elements but you may need something like the following for the 'featured-products' section.

@_media only screen and (max-width: 375px) {
  img { width: 100% }
}

[Coffee-Exp]

@elishaolade 

I'm a newbie to Shopify.  Maybe I misunderstand how to apply your code so that my issue has not been solved.

Would you mind to provide more ideas?  Thanks!

[dmwwebartisan · Accepted solution]

@Coffee-Exp 

Please add this code at the bottom of your assets/theme.scss.liquid file.

.feature-row-products-details-img img {
    margin-bottom: -7px;
}
@media screen and (max-width: 768px){
.feature-row-products-details-img{ width: 100% !important; }
.feature-row__text{ padding-bottom: 20px !important; }
}

Hope this helps.

Thanks!

[Coffee-Exp]

@dmwwebartisan 

Great thanks for your help!