Hello,
Say I wanted to change the “img” css on only the:
How do I integrate ty-pict into the custom img css below?
@media screen and (max-width: 768px) {
img {
max-width: 50%;
vertical-align: middle;
font-size: 0;
}
}
Thanks!
Hi Kayokoko
this is not so hard as you think, but you are missing some more info, like the outer div of the img.
You need to be more specific on what you want to change.
In that case you can have
[color=#282828][font=arial, verdana, tahoma, sans-serif]@media screen and (max-width: 768px) {[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif].ty-pict [/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif] { [/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]max-width: 50%;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]vertical-align: middle;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]font-size: 0;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]}[/font][/color]
}
but this will affect all the images with that class. If you now the div path to that image then you can target it much better.
Also font-size for img is not needed.
Fotis
[quote name=‘dvsgr’ timestamp=‘1430226888’ post=‘212832’]
Hi Kayokoko
this is not so hard as you think, but you are missing some more info, like the outer div of the img.
You need to be more specific on what you want to change.
In that case you can have
[color=#282828][font=arial, verdana, tahoma, sans-serif]@media screen and (max-width: 768px) {[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif].ty-pict [/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif] { [/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]max-width: 50%;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]vertical-align: middle;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]font-size: 0;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]}[/font][/color]
}
but this will affect all the images with that class. If you now the div path to that image then you can target it much better.
Also font-size for img is not needed.
Fotis
[/quote]
I just want to take the category images only and shrink them via max-width=50% because it was crashing mobile devices.
Thanks 
[color=#262626][font=arial, sans-serif][size=3]Hello Kayokoko,[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]@media screen and (max-width: 768px) {[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3].table.products td.product-image img,.product-container.list .product-item-image img,.multicolumns-list td.preview-image{ [/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]//put your css here[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]}[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]}[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]This css code will only be applied to images on the category page (depending on the way the product are displayed on the category page).[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]Thanks.[/size][/font][/color]
@media screen and (max-width: 768px) {
.table.products td.product-image img,.product-container.list .product-item-image img,.multicolumns-list td.preview-image{
max-width: 50%;
}
}
didn’t work 
Kayokoko,
Can we see your website? Please share the link.
Best regards,
Alt-team
[quote name='Alt-team' timestamp='1430292620' post='212883']
Kayokoko,
Can we see your website? Please share the link.
Best regards,
Alt-team
[/quote]
sure it's kayokokoswimwear.com
right now I hacked it to override ty.pict class with max-width: 50%
Thanks
[color=#262626][font=arial, sans-serif][size=3]Kayokoko,[/size][/font][/color]
[color=#262626][font=arial, sans-serif][size=3]Try to apply this css code[/size][/font][/color]
.ty-pagination-container .ty-pict2{
//put css for all images on category page
}
.ty-pagination-container .ty-product-list .ty-pict2{
// css only for image on "products without options" view on category page
}
.ty-pagination-container .grid-list .ty-pict2{
// css only for image on "products multicolumns" view on category page
}
.ty-pagination-container .ty-compact-list__item .ty-pict2{
// css only for image on "short list" view on category page
}
[color=#262626][font=arial, sans-serif][size=3]Best Regards, Alt-team.[/size][/font][/color]
Alt - THANK YOU!
alt how about the CSS to control the product page image size?