Need help with: Cart Design changes

Solved
Excursionist
54 0 1

Hi guys,

I am finishing my first store right now and recognized that my cart page is not looking good on mobile.
Here you have some pictures:
Problem #1: The "bearbeiten" button is not in line with the rest of the design and also not fully shown on some mobile devices.
IMG_2915.PNG

Problem #2: Once I click the button from picture number one, problem number 2, 3, 4 & 5 appears. These boxes are just not where there should be.
IMG_2916.PNG

I have a best practice example from a different store. I would love to have these boxes as clean as they are there.
IMG_2913.PNGIMG_2914.PNG

I would really appreciate any help because without fixing this problem, I can`t go live with my store.
Thanks so much guys!

Shop URL: www.beerstock.de 
Theme: Booster

Best practice Shop: www.leyendas.de
Theme: Debut

Best,
qcombo

0 Likes

Success.

Hello ,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (max-width: 749px) {
.cart__image-wrapper {
  -webkit-flex:0 0 85px;
  -moz-flex:0 0 85px;
  -ms-flex:0 0 85px;
  flex:0 0 60px;
 }
.cart__price-wrapper {
	-webkit-flex: 0 1 24%;
	-moz-flex: 0 1 24%;
	-ms-flex: 0 1 24%;
	flex: 0 1 32%;
	text-align: right;
}
.btn--small.js-edit-toggle .cart__edit-text--edit {
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 10px;
}

.btn--small.cart__update, .btn--small.cart__remove {
	font-size: 12px;
	letter-spacing: 0.5px;
	width: 100px;
}
.cart__price-wrapper.cart-flex-item {
	text-align: right !important;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Excursionist
54 0 1

@oscprofessional wrote:

Hello ,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (max-width: 749px) {
.cart__image-wrapper {
  -webkit-flex:0 0 85px;
  -moz-flex:0 0 85px;
  -ms-flex:0 0 85px;
  flex:0 0 60px;
 }
.cart__price-wrapper {
	-webkit-flex: 0 1 24%;
	-moz-flex: 0 1 24%;
	-ms-flex: 0 1 24%;
	flex: 0 1 32%;
	text-align: right;
}
.btn--small.js-edit-toggle .cart__edit-text--edit {
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 10px;
}

.btn--small.cart__update, .btn--small.cart__remove {
	font-size: 12px;
	letter-spacing: 0.5px;
	width: 100px;
}
.cart__price-wrapper.cart-flex-item {
	text-align: right !important;
}
}

thank you!! This is nearly perfect.
Is it possible to make the box I marked a little bit wider so that the hole text fits inside?
IMG_2917.jpg

0 Likes
Excursionist
54 0 1

or maybe under the "entfernen" button like in the best practice picture.

0 Likes

Success.

Please add below code

@media only screen and (max-width: 749px) {
.btn--small.cart__update, .btn--small.cart__remove {
	width: 80px;
}
.btn.btn--small.btn--secondary.cart__update.medium-up--hide {
	width: 115px;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Excursionist
54 0 1

thanks so much!

0 Likes