Beyondspace
-
Posts
10,115 -
Joined
-
Last visited
-
Days Won
80
Community Answers
-
Beyondspace's post in Looking for someone for a small custom CCS project (Dynamic logo nav movement) was marked as the answer
Can I DM to you for more detail?
-
Beyondspace's post in how to change my back to top button with an arrow was marked as the answer
You can add the following code to get the arrow
a.btt { background-image: url('https://api.iconify.design/material-symbols/arrow-upward.svg?color=%23626262'); background-repeat: no-repeat; background-position: center center ; background-size:contain; }
-
Beyondspace's post in CSS - Adjust Product dropdown layout was marked as the answer
Try adding to Home > Design > Custom Css
@media only screen and (min-width: 768px) { .ProductItem-details .variant-option { width: 45%; float: left; margin-right: 2%; } } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in is there a way to align the search bar with site title? was marked as the answer
Try adding to Home > Design > Custom Css
.sqs-search-page-input.sqs-search-input-content { padding-left: 0; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in how can i make store products full width? was marked as the answer
Try adding to Home > Design > Custom Css
.products.collection-content-wrapper.product-layout-side-by-side { padding: 0 7vw 0 0; box-sizing: border-box; overflow: hidden; } .products.collection-content-wrapper.product-layout-side-by-side .ProductItem-nav { justify-content: flex-end; padding-bottom: 0; } .products.collection-content-wrapper.product-layout-side-by-side .ProductItem-additional { padding-right: 7vw; padding-left: 7vw; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Flatiron Template: Remove Social Share on Blog Posts was marked as the answer
Try adding to Home > Design > Custom Css
.social-like { display: none; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in want an offset border around the button that was marked as the answer
You can try adding to Home > Design > Custom Css
input[type=submit] { box-shadow: 5px 5px; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Newsletter Block Padding? was marked as the answer
You can try the following codes in Home > Design > Custom Css
.newsletter-form-header { display: none; } .newsletter-form-wrapper { padding-top: 0 !important; } .newsletter-form-name-fieldset, .newsletter-form-field-wrapper,.newsletter-form-button-wrapper, .newsletter-form-button { width: 100% !important; } Let me know how it works on your site
-
Beyondspace's post in is there a way to remove the default magnifying glass image in the search bar? was marked as the answer
My testing
On my checking, it has no border
-
Beyondspace's post in Remove "menu" nav from mobile using code block on Wexley Template in Version 7.0 personal plan was marked as the answer
On mobile, you can use the following css code to hide the header menu
@media only screen and (max-width: 767px) { #mobileMenuLink { display: none; } } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Change Arrow of Slideshow Simple with custom code was marked as the answer
You can try
.gallery-slideshow-control-btn { background: #999; } .gallery-slideshow-control-btn .caret-left-icon--small,.gallery-slideshow-control-btn .caret-right-icon--small { stroke-width: 4px; width: 15px; height: 35px; } change the value until it meets your requirement
-
Beyondspace's post in Remove empty scroll bar for product thumbnails was marked as the answer
Try adding to Home > Design > Custom Css
.ProductItem .ProductItem-gallery-scroll .ProductItem-gallery-thumbnails { overflow: auto; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Decrease mobile breakpoint to show full navigation in tablet view was marked as the answer
Try adding to Home > Design > Custom Css
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (min-width: 768px) { .header-display-desktop { display: flex; } .header-burger { display: none; } .header .header-layout--with-commerce .header-title-nav-wrapper { flex: 1 0 67%; flex-wrap: nowrap; flex: 1 0 67%; display: flex; align-items: center; } .header .header-title-nav-wrapper .header-nav { display: block; } .header-display-mobile { display: none; } .header-display-desktop .showOnMobile { display: none; } .header-nav-list { flex-wrap: nowrap } .header .header-layout--with-commerce .header-title-nav-wrapper .header-title { width: 34%; text-align: center; flex: 1 1 34%; } .header .header-actions-action--social { display: flex } } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Change Logo On Mobile Menu Only (One Page) was marked as the answer
You can try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { div.header-title-logo a { content: url(https://images.unsplash.com/photo-1671212694375-1fdafb36ee4c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=1&auto=format%2Ccompress&fit=crop&w=799&h=594) !important; } } Change the Url with your desired image on mobile
Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Reduce Size of 'SALE' circle according to screen size was marked as the answer
You can use the css style for each breakpoint
.product-mark.sale { position: absolute; top: 50px; right: 20px; border: 0px solid white; width: 120px; height: 120px; font-size: 38px !important; color: white !important; text-align: center; padding: 2px 2px 0 2px; background: #EE3129; color: white; border-radius: 50%; line-height: 112px; display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 767px) { /*Mobile style*/ .product-mark.sale { width: 100px; height: 100px; font-size: 20px !important; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { /*tablet style*/ .product-mark.sale { width: ???; height: ???; font-size: 20px !important; } } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Center buttons for mobile was marked as the answer
You can try adding to home > design > custom css
@media only screen and (max-width: 767px) { section[data-section-id="63bee490b99e440ba7b5d3ef"] .sqs-block-button-container.sqs-block-button-container--left { justify-content: center; } } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in How to switch placement of social icons and logo in header was marked as the answer
Try adding to Home > Design > Custom Css
.header-display-desktop .header-title-nav-wrapper { order: 2; } .header-display-desktop .header-title-nav-wrapper .header-title { order: 2; } .header-display-desktop .header-title-nav-wrapper .header-nav { order: 1; margin-right: 20px; } .header-display-desktop .header-actions.header-actions--right { order: 1; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Add horizontal line between links on nav bar was marked as the answer
My testing
-
Beyondspace's post in Custom code appearing above my menu and header was marked as the answer
You can check on home page setting:
-
Beyondspace's post in Changing navigation on mobile version was marked as the answer
Try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px){ .back-to { display: block; text-align: right; } } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Flip Over Grid Gallery Images was marked as the answer
There are some effect you can try on my showcases
Gallery Hovers — Beyondspace (squarespace.com)
Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in Additional product customization field before adding to cart was marked as the answer
Have you tried using the form block to add on the additional info of product?
-
Beyondspace's post in Help with iFrame padding was marked as the answer
You can try adding to Home > Design > Custom Css
#block-yui_3_17_2_1_1665094218540_4516 iframe { border: 20px solid #fff !important; box-sizing: border-box; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in How do I change the colours of the "back" link in the navigation folder? was marked as the answer
It has a code that makes opacity 0.5
You can use the following code to overwrite it
.header-menu-controls { opacity: 1; } Support me by pressing 👍 or marking as solution if this useful for you
-
Beyondspace's post in How to link button to specific contact form was marked as the answer
You can try changing the href value on your button
to the following value
#block-yui_3_17_2_1_1670608241446_13958 This is the id of the contact form at top
Support me by pressing 👍 or marking as solution if this useful for you
