michaelpga

Site URL: https://www.nourish.melbourne
Hi!
How do you change the colour of the background and font on the shopping cart page?
The background colour I'd like changed to #f1f1ec
I'd like the "Shopping Cart" title to not be capitalised and match the heading font on the rest of my site.
Also, I'd like the 'checkout' button design to match the button design my site.
Website: www.nourish.melbourne
Password: nm2022
Version: 7.1

I see the code worked here. Try checking in incognito window

The site has 1400px max-width, so if you use a bigger screen, you will see problem on screenshot. Use this new code
/* nm for business logo */ @media screen and (min-width:992px) { div#block-yui_3_17_2_1_1649295043363_4653 { position: absolute; right: 2vw; top: 0; z-index: 9999; width: 150px; } [data-section-id="61d530df04118c04a5d1b17f"] .content-wrapper { max-width: 100%; }}  

Try adding to Settings > Advanced > Code Injection > Footer
<script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if (window.location == window.parent.location) { const reelControls = document.querySelectorAll('.gallery-reel-control [data-next]'); reelControls.forEach(reelControl => { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); }) } }); </script>  

Add to Design > Custom CSS
/* Message and energy work */ @media screen and (min-width:768px) { .user-items-list-item-container[data-section-id="624f97cfd7ac6b1217760c95"] li:nth-child(n+5) { position: relative; left: 50%; }}  

Thank you. Add to Design > Custom CSS
/* Homepage - Testimonial Titles */ body.homepage h2.list-item-content__title { font-size: 25px !important; }  

Solved! Thank you!

Hi, add this to custom css. Let me know how it goes 🙂
.cart-title { visibility: hidden; } .cart-title::before { visibility: visible; content: "Shopping Cart"; text-transform: capitalize; } #cart { background-color: #f1f1ec; } button.sqs-editable-button.V1ekGHu_1.checkout-button { border-radius: 300px; background-color: transparent; color: #5b291d; border: 2px solid #5b291d; text-transform: lowercase; font-family: Poppins; font-size: 15px; padding: 1.2em 2.004em; }

Add to Design > Custom CSS
/* resize mobile footer image */ @media screen and (max-width:767px) { footer.sections .image-block { width: 30% !important; margin: 0 auto; } }  

In config, click on the Blog Page. Click the settings gear icon, panel opens, then scroll down until you see posts per page,  then adjust the slider to 8.

It's worked perfectly on all devices and browsers, you're amazing!

Hi @bangank36, this white button only shows like this on homepage, on all other pages it displays in the correct colour...

Solved, thank you

@michaelpga It looks like you solved this?

It worked! You're amazing! Thank you so much for all of your help 🙂

Don't remove any code in your current code
Add this to Design > Custom CSS
header#header:not(.shrink) { background-color: transparent; }  

Try this CSS
/* Mobile footer */ @media screen and (max-width:767px) { div#page-section-6073cc487ffe752be973dabf .span-1 { width: 30% !important; float: left !important; } div#page-section-6073cc487ffe752be973dabf .span-3 { width: 70% !important; float: left !important; } }  

@michaelpga The site still private. Can you check it again?

@bangank36 yes, that's perfect, thank you so much for your help!
 

With the setting footer logo smaller and on the left of company information, you can replace my previous code with this one
@media only screen and (max-width: 767px) { footer .content-wrapper .content .sqs-layout > .row.sqs-row > .col:first-child { width: 25% !important; height: auto !important; position: absolute; top: 50%; left: 0; transform: translateY(-50%) !important; } footer .content-wrapper .content .sqs-layout > .row.sqs-row > .col:nth-child(2) { width: 75% !important; height: auto !important; position: absolute; top: 50%; right: 0; transform: translateY(-50%) !important; } } Support me by pressing 👍 if this useful for you

I can access your site. Can you check it again?