Jump to content

modifying css to fix image issue

Recommended Posts

Posted

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 

  • Replies 13
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Posted (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 by yubrajs
Posted

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

Posted

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

 

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.