• Karima

    (@creamms)


    /* Normal layout */	
    	
    .etsy-shop-listing-container {
        display: flex;
    	flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .etsy-shop-listing {
        border: 0;
    	padding: 15px;
    	width: 33%;
    }
    
    .etsy-shop-listing-card {
        background-color: white;
        text-align: center;
        margin: auto;
        padding: 0;
        font-size: 12px;
    	box-shadow: 0 0 10px 0 rgba(0,0,0,.15) !important;
    	height: 100%;
    	border-radius: 5px;
    	width: 100% !important;
    }
    
    .etsy-shop-listing-thumb {
        display: block;
    }
    
    .etsy-shop-listing-thumb img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100% !important;
        max-height: 570px;
    	border-radius: 5px 5px 0 0;
    
    }
    
    .etsy-shop-listing-detail {
        margin: 0;
        padding: 25px;
        text-align: left;
    
    // following will probably need to be change, this is referencing elementor theme
    
    	font-family: var( --e-global-typography-1d7ab85-font-family ), Sans-serif;
    	font-size: var( --e-global-typography-1d7ab85-font-size );
    	line-height: var( --e-global-typography-1d7ab85-line-height );
    	letter-spacing: var( --e-global-typography-1d7ab85-letter-spacing );
    	word-spacing: var( --e-global-typography-1d7ab85-word-spacing );
    //
    }
    
    .etsy-shop-listing-title {
    	white-space: nowrap;
        margin: 0;
        padding: 0;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
    
    // following will probably need to be change, this is referencing elementor theme
    
    	color: var( --e-global-color-primary );
        font-family: var( --e-global-typography-f834b77-font-family ), Sans-serif;
        font-size: var( --e-global-typography-f834b77-font-size );
        font-weight: var( --e-global-typography-f834b77-font-weight );
        line-height: var( --e-global-typography-f834b77-line-height );
        letter-spacing: var( --e-global-typography-f834b77-letter-spacing );
        word-spacing: var( --e-global-typography-f834b77-word-spacing );
    //
    }
    
    .etsy-shop-listing-title a {
        color: #666;
        text-decoration: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: none;
    }
    
    .etsy-shop-listing-maker {
        line-height: 14px !important;
        margin: 0;
        padding: 0;
    	display: none;
    }
    
    .etsy-shop-listing-card a {
        text-decoration: none;
        border-bottom: none;
        -webkit-box-shadow: none;
        border-bottom: none;
    }
    
    .etsy-shop-listing-maker a {
        color: #B2B2B2;
        text-decoration: none;
        border-bottom: none;
        padding: 0;
        margin: 0;
    }
    
    .etsy-shop-listing-price {
        font-family: var( --e-global-typography-ebdc950-font-family ), Sans-serif;
    	font-size: 25px;
    	text-transform: var( --e-global-typography-ebdc950-text-transform );
    	line-height: var( --e-global-typography-ebdc950-line-height );
    	letter-spacing: var( --e-global-typography-ebdc950-letter-spacing );
    	word-spacing: var( --e-global-typography-ebdc950-word-spacing );
    	padding: 25px;	
    	float: left;
    }
    
    .etsy-shop-currency-code {
        font-size: 10px;
    }
    
    /* Responsive layout - makes a two column layout instead of a three-column layout */
    
    @media (max-width: 1024px) {
    	.etsy-shop-listing {
    	width: 50%;
    	}
    }
    
    /* Responsive layout - makes a one column layout instead of a three-column layout */
    
    @media (max-width: 750px) {
    	.etsy-shop-listing {
    	width: 100%;
    	}
    }
    
    

The topic ‘CSS free to use’ is closed to new replies.