sally_cant

thank you 

yes thats what i need it to look like 

i added the code - but maybe i have added it in the wrong place???
 

/***header css start ***/
.products.collection-content-wrapper .grid-item .grid-item-image{

object-fit: contain !important;

}
@media only screen and (min-width:767px){

.header-title-logo a img {
   
    padding: 5px 20px !important;
    background-color: #fff;
    border-radius: 10px;
   
}

its the category page within the shop that i need the images to show in full 

adding that line didnt change anything 

this is the CSS as it stands now :

Where would i add the custom css?
 

/***header css start ***/
@media only screen and (min-width:767px){

.header-title-logo a img {
   
    padding: 5px 20px !important;
    background-color: #fff;
    border-radius: 10px;
   
}

.header-announcement-bar-wrapper {
    padding-top: 0.2vw !important;
    padding-bottom: 0.8vw !important;
    padding-left: 7vw !important;
    padding-right: 7vw !important;
 }

.header-title-logo a img {
    max-height: 120px;
    margin-top: -20px;
 }
  .tweak-product-basic-item-product-variant-display-dropdown .page-section .content {
    width: 98%;
 }  
}
.tweak-product-basic-item-product-variant-display-dropdown .page-section .content .pdp-gallery-images .variant-option-title {
    font-size: 15px;
    font-weight: 600;
}
.tweak-product-basic-item-product-variant-display-dropdown .page-section .content .pdp-gallery-images {
    padding-top: 4%;
 }
  .tweak-product-basic-item-product-variant-display-dropdown .pdp-gallery-images .pdp-gallery-slides-image {
    border-radius: 10px;
 }
.tweak-product-basic-item-product-variant-display-dropdown .pdp-gallery-images .product-variants select {
    outline: none;
}

/***headet csss end**/

#block-yui_3_17_2_1_1694671002889_7139 h3 {
    font-family: Carattere-Regular;
    margin-bottom: 0px;
}

#block-yui_3_17_2_1_1694671002889_7139 h1 {
    margin-top: 18px;
}

#block-yui_3_17_2_1_1694671002889_7139 {
    outline: 3px solid #ffffff;
    outline-offset: 6px;
}

section[data-section-id="6502a2d9a95146420e1b8f45"] li.list-item {
    border: 1px solid #ebebeb;
    border-radius: 15px;
}

section[data-section-id="6502a2d9a95146420e1b8f45"] .list-item-media .list-item-media-inner {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
section[data-section-id="6502a2d9a95146420e1b8f45"] .list-item-media {
    margin-bottom: 0px !important;
}
section[data-section-id="6502a2d9a95146420e1b8f45"] .list-item-content {
    padding: 20px 10px;
    background-color: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

section[data-section-id="6502a2d9a95146420e1b8f45"] .list-item-content__description p {
    font-size: 19px;
    font-weight: 600;
}

section[data-section-id="6502c886f758675697cad6b6"] .sqs-block-product {
    border: 1px solid #ebebeb;
    border-radius: 15px;
}

section[data-section-id="6502c886f758675697cad6b6"] .sqs-block-product .product-price {
    font-weight: 600;
    margin-bottom: 10px;
}
section[data-section-id="6502a2d9a95146420e1b8f45"] .list-section-title {
    font-size: 33px;
}

section[data-section-id="6502c886f758675697cad6b6"] .product-quantity-input {
    display: none;
}

section[data-section-id="6502c886f758675697cad6b6"] .sqs-block-product .productDetails.center .product-title {
    font-family: 'Libre Baskerville';
    font-size: 17px;
    line-height: 1.4em;
    margin-bottom: 21px;
   
}

/***arrow size small css start**/
section[data-section-id="6502a2d9a95146420e1b8f4a"] .user-items-list-carousel__arrow-icon {
    
    width: 23px !important;
    height: 23px !important;
}

section[data-section-id="6502a2d9a95146420e1b8f4a"] .user-items-list-carousel__arrow-icon-background-area {
   
    opacity: 1;
    
}

section[data-section-id="6502a2d9a95146420e1b8f4a"] .arrows-bottom {
   
    grid-gap: 13px !important;
}
section[data-section-id="6502a2d9a95146420e1b8f4a"] .user-items-list-carousel__arrow-button {
   
    width: 47px !important;
    height: 47px !important;
   
}

.fe-6502c886f758675697cad6b5 .product-block .product-variants {
    display: none;
}

/**arrow size small csss end**/

@font-face {
  font-family: Carattere-Regular;
  src: url(https://static1.squarespace.com/static/64a650d98d574a093bb3a42b/t/6502ad6d9b7c4904b39b9922/1694674285822/Carattere-Regular.ttf);
}

section[data-section-id="6502c886f758675697cad6b6"] .sqs-block-product .image-container img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

footer#footer-sections .content-wrapper {
    padding-bottom: 0px;
}

@media only screen and (max-width:768px){
  
  section[data-section-id="6502a2d9a95146420e1b8f45"] .section-background {
    background-color: #f9f9f9 !important;
}
  section[data-section-id="6502a2d9a95146420e1b8f4a"] .content {
    width: 90% !important;
    margin: auto !important;
}

#footer-sections h4 {
    margin-bottom: 0px;
}

  section[data-section-id="6502a2d9a95146420e1b8f45"] .list-section-title {
    font-size: 25px;
}
section[data-section-id="6502a2d9a95146420e1b8f4b"] .user-items-list {
    padding-top: 6vmax !important;
}

h2 {
    font-size: 25px;
}
section[data-section-id="6502a2d9a95146420e1b8f4b"] .list-section-title {
    padding-bottom: 20px !important;
}

section[data-section-id="6502a2d9a95146420e1b8f4b"] p {
    font-size: 25px;
}
#block-yui_3_17_2_1_1694671002889_7139 h1 {
    
    font-size: 31px;
}
section[data-section-id="6502a2d9a95146420e1b8f4b"] .content {
    width: 90% !important;
    margin: auto !important;
}

section[data-section-id="6502a2d9a95146420e1b8f45"] .content {
    width: 90% !important;
    margin: auto !important;
}

section[data-section-id="6502a2d9a95146420e1b8f4a"] .list-section-title p {
    font-size: 25px;
}
#block-0248e68c83d6d92eb74b h2 {
    margin-bottom: 10px;
}
section[data-section-id="6502a2d9a95146420e1b8f4a"] .list-section-button-container {
    margin-top: 40px !important;
}
  .header .header-announcement-bar-wrapper {
    padding: 1vw !important;
}
}

#footer-sections a {
    background-image: none !important;
}

does it matter where i place this within the CSS script?

i just want all the images to show in full 

https://www.sallycantartist.com/shop/miniature-originals---pelican-series

is there any easy way to modify the CSS so that my product images show fully in the category pages? I have images that are portrait and some that are Landscape. 
I'm not really a designer but know that modifying CSS is not difficult i just need to make sure i dont stuff up the site trying to add code into the CSS - many thanks Sally 

i am having the exact same problem as the photographer - can u assist me also ? I cannot get my photos for products to show correctly because some are portrait and some landscape - help please

https://www.sallycantartist.com/shop/miniature-originals---pelican-series

On 3/13/2023 at 7:38 PM, Ziggy said:

I don't think there will be a way to adjust the image aspect ratio based on category. You could target each page individually.

You can add CSS to prevent image cropping, and that might be a good enough solution, but will add a reasonable amount of negative space.

Can you share your website URL?

i am having the exact same problem as the photographer - can u assist me also ?