cart page texts alignment

Solved
Excursionist
67 0 3

Screenshot 2019-12-02 at 23.14.49.pngScreenshot 2019-12-02 at 23.00.47.png

website url: https://www.piecefulmind.dk/cart password: nutella2

My mobile cart page is driving me nuts and I would really appreciate if I could get a help fixing this. 

The pictures above are the same css code, but different mobile devices. I want the text positions to be like the left, and I want the 'continue shopping' button to be aligned to the check out button. The continue shopping button is my custom button, and it doesn't stay on the same position as the checkout button no matter what code I put. 

to make the button visible I had to put the code like this (class for the button is 'CS') 

 

.cart__footer .CS{
padding: 12px 15px;
border-radius: $radius;
font-size: $font-size-button;
letter-spacing: 1px;
border: 0;
width: 98%;
height: 48px;
display: block;
background-color: transparent;
color: #b1b159 !important;
border: 1.2px solid $color-btn-primary-bg;
position: relative;
float: center !important;
left: -78%;
}

 

and it ended up looking like the pictures. I want the text positions to be the same on all browsers and mobile devices. Please help..

 

0 Likes

try this

.cart__footer .CS {
padding: 12px 15px;
border-radius: 0;
font-size: 14px;
letter-spacing: 1px;
border: 0;
background-color: transparent;
margin-left: 88%;
margin-top: -122px;
position: absolute;
color: #b1b159 !important;
border: 1.2px solid #bbbb8f;
width: 90%;
}
 
if you face any problem let m know
Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes

Hello ,

Please add below css

@media only screen and (max-width: 768px) {
.cart__footer button#continue-shopping.CS {
    position: relative!important;
    margin: 0!important;
    left: 0!important;
    width: 100%!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 | Web Development
0 Likes

Success.

Shopify Partner
101 19 19

Hi @aaaf 

 

Hope you are doing well!

 

Add this code to your css

 

@media only screen and (max-width: 768px) {
.cart__footer button#continue-shopping.CS {
    position: relative!important;
    margin: 0!important;
    left: 0!important;
    width: 100%!important;
    top: -120px;
}
.shipping {
    width: 100% !important;
    text-align: right !important;
}
}

Thanks!

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
1 Like
Shopify Expert
87 14 16

hi,

Add below code before closing </head> tag .


<style>
@media only screen and (max-width: 768px){ .cart__footer .CS { padding: 12px 15px; border-radius: 0; font-size: 14px; letter-spacing: 1px; background-color: transparent; margin-left: 4px; margin-top: -145px; position: static; color: #b1b159 !important; border: 1.2px solid #bbbb8f; left: 0; top: 0; } }
</style>
0 Likes
Excursionist
67 0 3

@CodeCorners It worked perfectly for both the button and text! Thank you so much

1 Like
Shopify Partner
101 19 19

@aaaf 

 

Okay :)

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
Highlighted
Excursionist
67 0 3

I have one more question, for the cart page on desktop version I want the 'continue shopping' button to be next to check out button, right end of the cart footer page. I tried to put top: -50%; but it doesn't go up to the point where check out button is. I would appreciate so much if you could help me with this as well:) @CodeCorners 

 

Screenshot 2019-12-03 at 13.04.50.png

0 Likes
Shopify Expert
87 14 16

hi

you need to change grid structure.

 

 

0 Likes
Excursionist
67 0 3
How can I change it?
0 Likes