IXStudio

Hi
Use this code in Design -> Custom CSS
@media screen and (max-width: 640px) { h1, h2, h3, p { text-align: center !important; } } Please use the like button if it helps you!
Best,
Leopold

Hi,
Please share your website URL to check it easier!

Best,
Leopold

Change code to this
<style> body.view-list header#header img { content: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc80c1d7123d9ee8a4a3/1666169984378/Oppidan+Education+1+Dark.png); } body.view-list .shrink .header-title-logo img { visibility: hidden; } body.view-list .shrink .header-title-logo a { background-image: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc8686f458657486f7d2/1666169990610/Oppidan+Education+1.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } body.header--menu-open.view-list .shrink .header-title-logo img { visibility: hidden; } body.header--menu-open.view-list .shrink .header-title-logo a { background-image: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc80c1d7123d9ee8a4a3/1666169984378/Oppidan+Education+1+Dark.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } body.view-list .shrink .header-nav-item a { color: #132a42 !important; } body.view-list .shrink .header-actions-action--cta:before { color: #132a42 !important; } body.view-list .header-nav-folder-content a { color: #132a42 !important; } body.view-list .shrink .burger { -webkit-filter: invert(100%); filter: invert(100%); } body.view-list .mega-menu-on .header-title-logo img { visibility: hidden; } body.view-list .mega-menu-on .header-title-logo a { background-image: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc8686f458657486f7d2/1666169990610/Oppidan+Education+1.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } body.view-list .mega-menu-on .header-actions-action--cta:before { color: #132a42 !important; } </style>  

Add this code to Custom CSS, refresh the page, and then edit the size of the code block:
html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script { display: none !important; }

Hi,
It's from this website, Check it here: widget - userway

Please use the like button if the answer helps you! 
Best,
Leopold

@IXStudioThank you!!!
 

That works great! Thanks

Hi,
Use this code in Design -> Custom CSS
.header .header-announcement-bar-wrapper { margin: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-left: 2vw !important; background: white; padding-bottom: 0 !important; }
Please use the like button if it helps you! 👍
Best,
Leopold

Hi,
Use this code in Design -> Custom CSS
html>body.tweak-portfolio-grid-overlay-width-inset#collection-64ff2647c291d624b2896c8a .portfolio-grid-overlay { padding: 0 !important; } Please use the like button if it helps you!
Best,
Leopold

Hi,
Insert this code in your Footer Code Injection.
<script> document.querySelector('#block-ddf6eeb937a4a332956a a.summary-read-more-link').innerText = 'Purchase'; </script>  
Please use the like button if it helps you!
Best,
Leopold

thanks, this works too, but I used the answer from @Ziggy

Hi,
Use this code in Design -> Custom CSS
.header-display-desktop .header-title {z-index: 1;} .header-layout-nav-center .header-nav {z-index: 100;} Please use the like button if it helps you!
Best,
Leopold

Some custom code to change Header Logo to another logo on
One Page Desktop - Mobile  Collection Page only (Blog/Product/Event) Cart Page Search Page 404 Page Before Scroll - After Scroll ... These code for 7.1. If you use 7.0, or the code doesn't work, just comment site url, we will check & give exact code.
In the code, I used a random image on Pixabay, you can upload it & replace with your logo image url. #1. Change Logo on One Page
Edit Page > Add a Code Block > Paste the code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #2. Change Logo on Desktop Only
Insert code to Custom CSS
@media screen and (min-width:768px) { header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } } #3. Change Logo on Mobile Only
SS has an option to do this, so no need to use code

#4. Change Logo Before Header Scroll
Insert code to Custom CSS
header#header:not(.shrink) img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #5. Change Logo on Scroll
to Custom CSS
header#header.shrink img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #6. Change Logo when Overlay Menu/Burger Menu is Open
body.header--menu-open header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #7. Change Logo when Overlay Menu/Burger Menu is Close
body:not(.header--menu-open) header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #8. Change Logo on Blog Page (List + Detail post)
body[class*="type-blog"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #9. Change Logo on Blog List Page
body[class*="type-blog"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #10. Change Logo on All Blog Posts
body[class*="type-blog"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #11. Change Logo on Specific Blog Posts
Edit that post > Add a Code Block > Use this code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #12. Change Logo on Shop/Category Page
Insert to Custom CSS
body[class*="type-products"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #13. Change Logo on Product Detail Page
body[class*="type-products"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #14. Change Logo on Some Specific Products
First create a tag with name: clg
Next, use CSS code
.tag-clg header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } (clg means change logo :-D)
#15. Change Logo on 1 Product
Edit Product > Additional Info > Add a Code Block > Use code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #16. Change Logo on Event Page
To Custom CSS
body[class*="type-events"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #17. Change Logo on Event List Page
To Custom CSS
body[class*="type-events"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #18. Change Logo on Event Detail Page
To Custom CSS
body[class*="type-events"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #19. Change Logo on 1 Event
Edit that Event > Add a Code Block in Event Description/Content > Paste this code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #20. Change Logo on Cart Page
To Custom CSS
body#cart header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #21. Change Logo on Search Page/Search Results Page
Add to Settings > Developer Tools > Code Injection > Footer (or Website > Website Tools > Code Injection > Footer)
<script> if (document.location.pathname.indexOf("/search") == 0) { document.querySelector('body').classList.add('t-search') } </script> <style> body.t-search header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #22. Change Logo on 404 Page
body#not-found header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #23. Invert Logo Color
Colored Logo to Black
header#header img { filter: brightness(0) invert(0); } Colored Logo to White
header#header img { filter: brightness(0) invert(1); } To apply to specific pages, you can add pre-fix, similar code in #1 to #20
#24. Invert Black Logo to White (One Page)
<style> header#header { filter: invert(1); -webkit-filter: invert(1); } </style> If you use Business Plan or higher, add it to Page Header Code Injection
If you use Personal/Basic Plan, you can edit page > Add a Code Block (anywhere on page)
#25. Invert White Logo to Black (One Page)
Same code #24

You've added this code to your website:
.header-display-desktop .header-title {
    position: relative;
    right: -5vw;
}
This is causing the logo container to overlap the navigation and causing the first link not to be clickable. You want remove that code and to add the padding like this if you want to move the logo over by 5vw:
.header-title-logo {
    padding-left: 5vw;
}

Hi
Use this code in Design -> Custom CSS
@media screen and (max-width: 640px) { h1, h2, h3, p { text-align: center !important; } } Please use the like button if it helps you!
Best,
Leopold

Hi
Use this code in Design -> Custom CSS
.tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 0vw !important; padding-bottom: 0vw !important; } Please use the like button if it helps you!
Best,
Leopold

Hi,
You can use SQSP section editor and in the second tab insert you custom background if you are using 7.1!
Also this is your needs!
Use this code in Design -> Custom CSS
section[data-section-id="5f3a0d8062c23339b593353c"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/5f39dfc53a6be72f5bcec0f0/1599430910621-MMSYWOJEH3VCLMMRVQ59/ke17ZwdGBToddI8pDm48kPTrHXgsMrSIMwe6YW3w1AZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0k5fwC0WRNFJBIXiBeNI5fKTrY37saURwPBw8fO2esROAxn-RKSrlQamlL27g22X2A/cocina4.jpg?format=1000w'); background-size: cover; } Please use the like button if it helps you!
Best,
Leopold

Hi
Use this code in Design -> Custom CSS
.tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 0vw !important; padding-bottom: 0vw !important; } Please use the like button if it helps you!
Best,
Leopold

Hi
Use this code in Design -> Custom CSS
.tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 0vw !important; padding-bottom: 0vw !important; } Please use the like button if it helps you!
Best,
Leopold

Hi
Use this code in Design -> Custom CSS
.tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 0vw !important; padding-bottom: 0vw !important; } Please use the like button if it helps you!
Best,
Leopold

It is Blog Page Setting. Code at here, will run for every individual blog posts

@tuanphan@IXStudio

Hi, I am facing the same issue with the much smaller font on mobile.
Here's the link to the site: https://career-atlas.squarespace.com
password: 1234ca
A fix would be much appreciated. Thank you!

Works like a charm - was also able to adjust line-height!
You are the best!  Thank you so much!! 

Add to Design > Custom CSS
/* Ninja Typewriter on mobile */ @media screen and (max-width:767px) { div#ninja-elements * { font-size: 30px !important; } }  

Hi
Use this code in Design -> Custom CSS
.tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 0vw !important; padding-bottom: 0vw !important; } Please use the like button if it helps you!
Best,
Leopold