sally_cant Posted January 16 Posted January 16 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
sally_cant Posted January 16 Author Posted January 16 https://www.sallycantartist.com/shop/miniature-originals---pelican-series
yubrajs Posted January 16 Posted January 16 (edited) You can use the custom css: .products.collection-content-wrapper .grid-item .grid-item-image{ object-fit: contain !important; } This will show the image in full. Edited January 16 by yubrajs
sally_cant Posted January 16 Author Posted January 16 does it matter where i place this within the CSS script?
sally_cant Posted January 16 Author Posted January 16 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; }
yubrajs Posted January 16 Posted January 16 Add above this line: @media only screen and (max-width:768px){
sally_cant Posted January 16 Author Posted January 16 its the category page within the shop that i need the images to show in full
yubrajs Posted January 16 Posted January 16 I dont see the code in your css. This is how it should look after adding the code. Check the attached screen-shot.
sally_cant Posted January 16 Author Posted January 16 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; }
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment