sally_cant Posted January 16 Share 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 Link to comment
sally_cant Posted January 16 Author Share Posted January 16 https://www.sallycantartist.com/shop/miniature-originals---pelican-series Link to comment
sally_cant Posted January 16 Author Share Posted January 16 i just want all the images to show in full Link to comment
yubrajs Posted January 16 Share 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 Link to comment
sally_cant Posted January 16 Author Share Posted January 16 does it matter where i place this within the CSS script? Link to comment
sally_cant Posted January 16 Author Share 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; } Link to comment
yubrajs Posted January 16 Share Posted January 16 Add above this line: @media only screen and (max-width:768px){ Link to comment
sally_cant Posted January 16 Author Share Posted January 16 adding that line didnt change anything Link to comment
sally_cant Posted January 16 Author Share Posted January 16 its the category page within the shop that i need the images to show in full Link to comment
yubrajs Posted January 16 Share 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. Link to comment
sally_cant Posted January 16 Author Share 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; } Link to comment
yubrajs Posted January 16 Share Posted January 16 Please add it as last line of custom css. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment