Craft theme: circular photos, design adjustments

[ananna]

Hello, 

I have some design aspects that still bother me that I would like to fix on the page www.sakeroting.fi
I have attached screenshots of them below.

Problem 1: The outline of the product cards on the collection page, since the images are round I would like to get rid of the card outline completely.
Problem 2: The round images are not centered on mobile (how I'd like them to be), they are on the left. This applies to both the front page and the collection pages.
Problem 3: The product images shown under "you might also like" on a product page, are overlapping eachother. 

Alternative question: will these round images be causing more design issues than they are worth? Should I opt for square images with just slightly rounded corners instead to save me the trouble..

Anyone that can assist me with these design flaws?

Thank you so much in advance!

[Raj-webdesigner]

Add This Css in Edite Code > Base.css File

.card.card--card.card--media.color-background-1.gradient {
	    border: none;
	} 
@media screen and (max-width:768px){
	.card-wrapper.animate-arrow.collection-card-wrapper {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.card.card--card.card--media .card__inner {
    	width: auto !important;
     	height: auto !important;
    }
}	

[Made4uo-Ribe]

Hi @ananna 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.card--card, .card--standard .card__inner {
    border: none;
}
@media only screen and (max-width: 988px){
.card__inner {
    margin: auto;
}
}

And Save. 

The 3rd question, you add some code in the component-card.css that over power the sizes of the images, that is why its overlapping. 

remove the !important on the widrth. This is not only affecting in the "you might like" product but in all your product images. 

For the Alternative Question: the shapes, color, and other design will always be differ on the store design. But as a suggestion, it better not to used the round shape on your product images. Cause some of the content of the product images wont be fully seen, just a bit of radius is enough to add desing on it. You need to catch costumers attention, so it wont be pleasing there is cut content in the images. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!