AirleaEvary

what as the solution? I wish to add a line between products on the store page on mobile.

Hello! https://www.thejanimalstore.com/ My client wants to separate the products better when viewing the landing page on mobiles, as they stack on top of each other. She wants a visual break after the price line, before the next product. If possible, I'd love to be able to mimic the green and orange wavy lines seen at the end of each section.

thanks! I will save this for a later time. my client decide she wanted a totally different way to display the event info.

I havent looked into that settings. Where is it located? I don't really want to change universal settings though, just remove that underline.

you can see it here in the words Exhibition and Photography I want to remove the underline from those title lines so it wont do that anymore.

Hello, I've searched around for a bit but can't find code for this specific problem. The Events page I'm referring to - https://www.robinzygelmanphotography.com/events As you can see, the event title has an underline. When the page gets re-seized that underline cuts through the words. I want to remove the underline completely.. I found this code to change the font: .eventitem-title, .eventlist-title { color:white!important; font-size:35px!important; font-family:poppins!important } but not sure how to adjust the underline portion of this. Help?

seems to be working now. thanks!

good catch! Thanks

Thanks this worked perfectly!

I would also like to add a different symbol to the breadcrumb menu but I'm using a section of code that forces the breadcrumbs to behave differently, can something be added to what I have to make a separation icon between links? I also need to make the font match my custom upload. www.thejanimalstore.com password Artist2023 here is all my code, the code concerning the breadcrumb adjustments is toward the bottom: @font-face { font-family: MrsEavesOT-Roman; src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf); } h1 {font-family: MrsEavesOT-Roman;} h2 {font-family: MrsEavesOT-Roman;} h3 {font-family: MrsEavesOT-Roman;} h4 {font-family: MrsEavesOT-Roman;} p {font-family: MrsEavesOT-Roman;} .header-title a { font-family: 'FontTitleHere' !important; } .header-nav-item a { font-family: MrsEavesOT-Roman !important; } time.summary-metadata-item.summary-metadata-item--date { font-family: MrsEavesOT-Roman !important; } a.summary-title-link { font-family: MrsEavesOT-Roman !important; } a.summary-read-more-link { font-family: MrsEavesOT-Roman !important; } .sqs-add-to-cart-button-inner { font-family: MrsEavesOT-Roman ; } .header--menu-open a {font-family: MrsEavesOT-Roman} .collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status { font-family: MrsEavesOT-Roman !important; } .blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;} .item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;} .blog-item-title h1.entry-title { font-family: MrsEavesOT-Roman !important; } #siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element { font-family: MrsEavesOT-Roman !important; } a.nested-category-breadcrumb-link { font-family: MrsEavesOT-Roman !important; } /* Product Detail - Description */ section.product-details.ProductItem-details * { font-family: MrsEavesOT-Roman !important; } .collection-type-products .ProductItem-details .product-price, .ProductItem-nav-breadcrumb, body:not( .button-style-default ) .sqs-add-to-cart-button, .nested-category-children { font-family : MrsEavesOT-Roman; } .newsletter-block .newsletter-form-header-title { font-family: MrsEavesOT-Roman !important; } /* Cart page custom font */ div#sqs-cart-container * { font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important; } /* Promotional popup custom font */ .sqs-popup-overlay-content * { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Description // .newsletter-block .newsletter-form-header-description p { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Fields // .newsletter-block .newsletter-form-field-element { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Button // .newsletter-block .newsletter-form-button { font-family: MrsEavesOT-Roman !important; } .variant-option * { font-family: MrsEavesOT-Roman !important; } // For the Form .sqs-block-form .field-list .title, .sqs-block-form .field-list .caption, .form-wrapper .field-list .field .field-element, .sqs-block-form .field-list select, .form-wrapper .field-list textarea, body:not(.button-style-default) .sqs-block-form .sqs-editable-button { font-family: MrsEavesOT-Roman !important; } .form-wrapper .field-list .field .caption { font-family: MrsEavesOT-Roman; font-size: 9px; color: white; letter-spacing: .15em; text-transform: none; } .sqs-block-button-element { box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); } .sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary { box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75); } /* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F0A166!important; /* change the button background color */ border: 2px solid #EF8345!important; /* change the button border */ font-size: 1.2rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#4E7C72!important; /* change the button background color */ color: #EF8345!important; /* change the font color */ box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { background: #4E7C72 !important;/* change the button background color */ color: #F0A166 !important;/* change the button font color */ border: 1px solid black !important; /* change the button border */ border-radius: 8rem !important; /* change the button shape */ } /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; } /* stack mobile breadcrumb nav links */ @media only screen and (max-width:767px) { .nested-category-tree-wrapper>ul { flex-direction: column; } }

Also, Is there any way to make the custom font that's throughout the rest of the page show for this breadcrumb menu? the code I have already adjusted the font just fine, but when I added code to make the breadcrumbs show differently the font code stopped working. here is ALL my code just for an FYI @font-face { font-family: MrsEavesOT-Roman; src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf); } h1 {font-family: MrsEavesOT-Roman;} h2 {font-family: MrsEavesOT-Roman;} h3 {font-family: MrsEavesOT-Roman;} h4 {font-family: MrsEavesOT-Roman;} p {font-family: MrsEavesOT-Roman;} .header-title a { font-family: 'FontTitleHere' !important; } .header-nav-item a { font-family: MrsEavesOT-Roman !important; } time.summary-metadata-item.summary-metadata-item--date { font-family: MrsEavesOT-Roman !important; } a.summary-title-link { font-family: MrsEavesOT-Roman !important; } a.summary-read-more-link { font-family: MrsEavesOT-Roman !important; } .sqs-add-to-cart-button-inner { font-family: MrsEavesOT-Roman ; } .header--menu-open a {font-family: MrsEavesOT-Roman} .collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status { font-family: MrsEavesOT-Roman !important; } .blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;} .item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;} .blog-item-title h1.entry-title { font-family: MrsEavesOT-Roman !important; } #siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element { font-family: MrsEavesOT-Roman !important; } a.nested-category-breadcrumb-link { font-family: MrsEavesOT-Roman !important; } /* Product Detail - Description */ section.product-details.ProductItem-details * { font-family: MrsEavesOT-Roman !important; } .collection-type-products .ProductItem-details .product-price, .ProductItem-nav-breadcrumb, body:not( .button-style-default ) .sqs-add-to-cart-button, .nested-category-children { font-family : MrsEavesOT-Roman; } .newsletter-block .newsletter-form-header-title { font-family: MrsEavesOT-Roman !important; } /* Cart page custom font */ div#sqs-cart-container * { font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important; } /* Promotional popup custom font */ .sqs-popup-overlay-content * { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Description // .newsletter-block .newsletter-form-header-description p { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Fields // .newsletter-block .newsletter-form-field-element { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Button // .newsletter-block .newsletter-form-button { font-family: MrsEavesOT-Roman !important; } .variant-option * { font-family: MrsEavesOT-Roman !important; } // For the Form .sqs-block-form .field-list .title, .sqs-block-form .field-list .caption, .form-wrapper .field-list .field .field-element, .sqs-block-form .field-list select, .form-wrapper .field-list textarea, body:not(.button-style-default) .sqs-block-form .sqs-editable-button { font-family: MrsEavesOT-Roman !important; } .form-wrapper .field-list .field .caption { font-family: MrsEavesOT-Roman; font-size: 9px; color: white; letter-spacing: .15em; text-transform: none; } .sqs-block-button-element { box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); } .sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary { box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75); } /* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F0A166!important; /* change the button background color */ border: 2px solid #EF8345!important; /* change the button border */ font-size: 1.2rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#4E7C72!important; /* change the button background color */ color: #EF8345!important; /* change the font color */ box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { background: #4E7C72 !important;/* change the button background color */ color: #F0A166 !important;/* change the button font color */ border: 1px solid black !important; /* change the button border */ border-radius: 8rem !important; /* change the button shape */ } /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; } @media only screen and (max-width:767px) { .nested-category-tree-wrapper>ul { flex-direction: column; } }

AAAaaaaand now it's stacking??!! lol ok I guess it was user error on that last try.

sorry I think I closed out the wrong page before saving - please check again. I added and saved again.

this worked- kind of. Now they are scrunched together instead of stacking. Only on mobile view though! so that is in the right direction I do really appreciate this. These breadcrumb menus are a mess thanks to SqSp Here is what I see:

here is my current code, all of it, in case that helps @font-face { font-family: MrsEavesOT-Roman; src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf); } h1 {font-family: MrsEavesOT-Roman;} h2 {font-family: MrsEavesOT-Roman;} h3 {font-family: MrsEavesOT-Roman;} h4 {font-family: MrsEavesOT-Roman;} p {font-family: MrsEavesOT-Roman;} .header-title a { font-family: 'FontTitleHere' !important; } .header-nav-item a { font-family: MrsEavesOT-Roman !important; } time.summary-metadata-item.summary-metadata-item--date { font-family: MrsEavesOT-Roman !important; } a.summary-title-link { font-family: MrsEavesOT-Roman !important; } a.summary-read-more-link { font-family: MrsEavesOT-Roman !important; } .sqs-add-to-cart-button-inner { font-family: MrsEavesOT-Roman ; } .header--menu-open a {font-family: MrsEavesOT-Roman} .collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status { font-family: MrsEavesOT-Roman !important; } .blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;} .item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;} .blog-item-title h1.entry-title { font-family: MrsEavesOT-Roman !important; } #siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element { font-family: MrsEavesOT-Roman !important; } a.nested-category-breadcrumb-link { font-family: MrsEavesOT-Roman !important; } /* Product Detail - Description */ section.product-details.ProductItem-details * { font-family: MrsEavesOT-Roman !important; } .collection-type-products .ProductItem-details .product-price, .ProductItem-nav-breadcrumb, body:not( .button-style-default ) .sqs-add-to-cart-button, .nested-category-children { font-family : MrsEavesOT-Roman; } .newsletter-block .newsletter-form-header-title { font-family: MrsEavesOT-Roman !important; } /* Cart page custom font */ div#sqs-cart-container * { font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important; } /* Promotional popup custom font */ .sqs-popup-overlay-content * { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Description // .newsletter-block .newsletter-form-header-description p { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Fields // .newsletter-block .newsletter-form-field-element { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Button // .newsletter-block .newsletter-form-button { font-family: MrsEavesOT-Roman !important; } .variant-option * { font-family: MrsEavesOT-Roman !important; } // For the Form .sqs-block-form .field-list .title, .sqs-block-form .field-list .caption, .form-wrapper .field-list .field .field-element, .sqs-block-form .field-list select, .form-wrapper .field-list textarea, body:not(.button-style-default) .sqs-block-form .sqs-editable-button { font-family: MrsEavesOT-Roman !important; } .form-wrapper .field-list .field .caption { font-family: MrsEavesOT-Roman; font-size: 9px; color: white; letter-spacing: .15em; text-transform: none; } .sqs-block-button-element { box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); } .sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary { box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75); } /* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F0A166!important; /* change the button background color */ border: 2px solid #EF8345!important; /* change the button border */ font-size: 1.2rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#4E7C72!important; /* change the button background color */ color: #EF8345!important; /* change the font color */ box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { background: #4E7C72 !important;/* change the button background color */ color: #F0A166 !important;/* change the button font color */ border: 1px solid black !important; /* change the button border */ border-radius: 8rem !important; /* change the button shape */ } /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; }

This changed the desktop view to a stacked list (see screen cap) I only want the mobile view to stack.

I tried this and it didn't do anything. Is there a different code that may work?

Also, is it possible to chang ethe word "all" to "all products" www.thejanimalstore.com password Artist2023

Hello! thanks so much for all this code help! I was able to get the categories to show up like I wanted but now my issue is - my custom CSS for the font is no longer working. Can something be added to change the font to the one I have uploaded??

The password to the site is Artist2023 https://www.thejanimalstore.com/shop when anyone views the store page on their phone, the product menu at the top gets cut off and there is a horizontal scroll bar to see the full menu (see screen cap) Is there a way to change this so that the links stack instead of scroll? That way they are all highly visible on mobile view. Thanks in advance!

thanks this worked for me!

Unfortunately that didn't work -

Thanks! This worked great on the Add to Cart buttons! The only button that seems to be missing from my code now is the Shopping Cart button on the header. Any clue ?

here is all the font related code I've utilized so far: @font-face { font-family: MrsEavesOT-Roman; src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf); } h1 {font-family: MrsEavesOT-Roman;} h2 {font-family: MrsEavesOT-Roman;} h3 {font-family: MrsEavesOT-Roman;} h4 {font-family: MrsEavesOT-Roman;} p {font-family: MrsEavesOT-Roman;} .header-title a { font-family: 'FontTitleHere' !important; } .header-nav-item a { font-family: MrsEavesOT-Roman !important; } time.summary-metadata-item.summary-metadata-item--date { font-family: MrsEavesOT-Roman !important; } a.summary-title-link { font-family: MrsEavesOT-Roman !important; } a.summary-read-more-link { font-family: MrsEavesOT-Roman !important; } .header--menu-open a {font-family: MrsEavesOT-Roman} .collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status { font-family: MrsEavesOT-Roman !important; } .blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;} .item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;} .blog-item-title h1.entry-title { font-family: MrsEavesOT-Roman !important; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: MrsEavesOT-Roman !important; } a.nested-category-breadcrumb-link { font-family: MrsEavesOT-Roman !important; } /* Product Detail - Description */ section.product-details.ProductItem-details * { font-family: MrsEavesOT-Roman !important; } .newsletter-block .newsletter-form-header-title { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Description // .newsletter-block .newsletter-form-header-description p { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Fields // .newsletter-block .newsletter-form-field-element { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Button // .newsletter-block .newsletter-form-button { font-family: MrsEavesOT-Roman !important; }

Hello, I got the font to change don't he product pages but on the main shop page it's still the default. Can anyone help? www.thejanimalstore.com password Artist2023