Craft theme: circular photos, design adjustments

ananna
Tourist
8 0 5

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!

 

Untitled design-2.jpgIMG_1151.PNG

IMG_1154.PNG

Replies 2 (2)

Raj-webdesigner
Shopify Partner
236 52 53

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;
    }
}	
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

Made4uo-Ribe
Shopify Partner
5581 1344 1658

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. 

Made4uoRibe_0-1711710994702.png

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

Made4uoRibe_1-1711711078310.png

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com