Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to align checkbox section

Solved

Why is my checkbox section not aligning properly on PC?

MetteT
Explorer
63 4 4

I have a checkbox section in the cart on my page, and it is correctly centered on mobile, but on PC it aligns to the left instead of to the right like the rest of the text in the same section. How do i correct this?

 

Also is there a way to make the link in the sentence black, like the rest of the text. Right now its blue before clicked and purple after. I just want it to be black.

 

URL: https://teefiti.dk/cart/ Code: Teefiti2022

 

Screenshot 2022-11-24_13-09-43-748.png

Accepted Solution (1)
MandasaTech
Shopify Partner
723 146 151

This is an accepted solution.

@MetteT 

Add this code

<style>
.payment-terms {
text-align: right !important;
}

@media(min-width: 280px) and (max-width: 767px){
.payment-terms {
text-align: center !important;
}
}
</style>

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

Replies 9 (9)

MandasaTech
Shopify Partner
723 146 151

@MetteT 


Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file


.payment-terms {
text-align: right !important;
}

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
MetteT
Explorer
63 4 4

@MandasaTech Unfortunately this didn't work. 😞

MandasaTech
Shopify Partner
723 146 151

@MetteT 


Add this CSS below of theme.liquid after closing body tag(</body>).

<style>

.payment-terms {
text-align: right !important;
}
</style>

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
MetteT
Explorer
63 4 4

@MandasaTech It worked, but now it is also aligned to the right on mobile, how do i make it so its centered on mobile, but aligned to the right on pc?

MandasaTech
Shopify Partner
723 146 151

This is an accepted solution.

@MetteT 

Add this code

<style>
.payment-terms {
text-align: right !important;
}

@media(min-width: 280px) and (max-width: 767px){
.payment-terms {
text-align: center !important;
}
}
</style>

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
MetteT
Explorer
63 4 4

@MandasaTech Thank you, this worked! Do you also have a code for making the link black?

ReturnPrime
Shopify Partner
486 67 111

Hey @MetteT    ,
Welcome to the Shopify community!
You can follow the instruction below:
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file.

.payment-terms p{
    text-align: right !important;
}


 If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman

oscprofessional
Shopify Partner
16116 2410 3126

@MetteT 

.payment-terms a {
    color: black !important;
}
@media only screen and (min-width: 992px){
body .cart__ctas {
    text-align: right !important;
}
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
MetteT
Explorer
63 4 4

@oscprofessionalI have already managed to align the text with code i got from Mandasa, and the part of your code that should make the link black unfortunately doesnt work. 😞