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

Solved
Coffee-Exp
Excursionist
27 0 9

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
New Member
2 0 0

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% }
}

 

 

0 Likes
Coffee-Exp
Excursionist
27 0 9

@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!

0 Likes
dmwwebartisan
Shopify Partner
5878 1345 1729

This is an 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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Coffee-Exp
Excursionist
27 0 9

@dmwwebartisan 

Great thanks for your help!