afs242

Thanks as always Tuan for the amazing assistance.
That's interesting re: color. I'll stop obsessing about that then I guess:)

Re: Font size-  In Mobile Mode that code effects the size of the variant "Select Pattern" and "Select Threader Length" selection area (see blue box items in photo). But it does not effect "Select Threader Length" in the drop down menu (see red circle in photo). Basically I'm trying to avoid the text wrap-around in mobile mode by lowering the font-size of that section specifically. Any thoughts?

Interestingly enough in Laptop mode that code does effect font size in both the blue square and red circle area. 🤷

Looking to change the Variant drop down selector menu font size and highlight color. See image attached.
Specifically looking to change "Select Color", "Pearl", "Champagne" Font size.
And to change the highlight color different than blue.

Link to site:
Version 7.1
https://www.raehcollection.com/shop/p/wana-earring-threader

Thank you for responding tuan.  That worked! You're always so amazing with your knowledge. Funny enough, I just sat down before you responded to fiddle with it some more and got it to work with this code as well:

.user-items-list-carousel__arrow-button{
 color: #000000 !important;
}

This code worked great for me, but for some reason the arrow color has turned blue. It looks black (which is what I prefer) in the squarespace editor but blue when viewing on mobile (see image attached). 
Link: www.raehcollection.com

Any thoughts?

I tried this code to change the color but it doesn't seem to work:

@media screen and (max-width:767px) {
svg.user-items-list-carousel__arrow-icon-path{
  stroke: black !important;
}}

Site URL is www.raehcollection.com
Working with Brine on 7.0

Halfway down the page you'll see a Summary Carousel of Products. When clicking to the end of the listed products it stops (see image attached). 

Is there any code for the first product to loop to the beginning and continue through the listed products infinitely (in essence start over) so the viewer doesn't have to click the left button to return to the beginning?

Hey Paul, I tried your solution on my brine 7.0 website. I'm not able to make it work for some reason on the shop page or the product's page. See Product title "Simple Sandalwood Bracelet". 
https://www.raehcollection.com/shop

I disabled Ajax loading. Injected code in Footer. Labeled Product Name as Simple Sandalwood | Bracelet.
Product name still seems to layer on top of itself. (see attached image)
I would like it to be centered and say..

Simple Sandalwood
Bracelet

It does the same thing on the actual product's page. (see attached image)
https://www.raehcollection.com/shop/simple-sandalwood-bracelet

Thoughts?

It seems under Site Styles under Index Navigation I had checked "Apply Minimum Height" to All Pages. By default this sets minimum height to 50vh. I turned "Apply Minimum Height" to None. Under Custom CSS I then reduced top/bottom padding to each of the galleries blocks on each page using this code (see below). This gave me control of the white space on mobile view.

//Header Banner Padding mobile//
@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1700096549547_1930{
    padding-top: 0px !important;
     padding-bottom: 0px !important;
}
}
//end//

As I only want the white space gone on mobile version I included this with your code-

@media screen and (max-width:640px) {
section.Index-page>.Index-page-content {
    justify-content: flex-start !important;
}
}

Unfortunately that didn't get rid of the extra white space. It doesn't seem to appear on all the pages, just three of them.

https://www.raehcollection.com
https://www.raehcollection.com/find-us
https://www.raehcollection.com/story

I did not. I gave the wrong image example and link in the first post. That page works as well as the shop page on this site. However all the other pages have the large white space at the top. See example on home page at  www.raehcollection.com

Thanks for responding tuanphan.  I decided to use a floating sticky button instead. I utilized/modified code from previous forum postings that you responded to for this effect. Thank you for sharing all your amazing knowledge.

After inspecting the coding in mobile view it looks like there is 17px of padding on block's last-child and the first child (see attached image). I've targeted that block but the white still won't disappear.  

The page is at ttps://www.raehcollection.com

Any other ideas?

Using Brine 7.0
On website the content section section padding is site through site styles and looks fine. 
(Note green arrow on 1st photo)
However on mobile there is a huge white space. 
(Note red arrow on 2nd photo)

Is the css to get rid of that white gap on mobile?
page is found at https://www.raehcollection.com/shop/wana-earring-threader

Working with Brine 7.0

Carousel Gallery does not show Image titles/description.
Is there css code to make them appear?
Carousel can be found on first page of www.raehcollection.com
 

Yes sir! That does perfect. Your skillset and willingness to help are very appreciated.

I'm looking for css solve to spacing issue with breadcrumbs in mobile view.

Spacing in desktop view for breadcrumbs looks fine. Previous Page crumb is far left. Next Page crumb is far right. 

In mobile view the Previous Page crumb is far left... however the Next Page crumb is just below it. Can css code move the Next Page crumb over to the right so it visually mimics their placement in desktop view?

I have tried altering the padding around the words and that didn't work. I have also made the font size smaller thinking that would solve the issue in case the long word length is creating the words to wrap. This has not worked either.

Page can be seen at https://www.raehcollection.com/shop/sweet-sparkle-diamond-necklace

Does anyone have other ideas?

Great point Paul, that code works splendidly and does solve potential viewing challenges on other devices. I appreciate you both chiming in with ideas and solves. 

Yes, two different types of code were provided. Both were helpful depending on what type of solution is needed. Thread can be viewed here

Cate, that worked like a charm! Thank you for your help. 
And Paul, I appreciate you working through it as well.

Thanks for getting back and trying to clarify with me.
I DO want the first four thumbnails (circled in green) to be shown. 
I do NOT want the thumbnails (circled in red) that are relevant to the selected variant to be shown. When variant is selected it should ONLY show in the larger photo area (circled in blue)

Thanks for responding Paul.
Last week I had came across your Filter in my web search for a solution. It looks like a very useful tool, however there was one line in the description that sounded like it may not do a specific task that I was looking for. 

• All product thumbnails will be shown when no variant has been selected (i.e. when 'Select Colour' is displayed in the dropdown)

Perhaps I am reading the filter description incorrectly and it can achieve what I am looking for. Will you confirm if it can/can't based off my below explanation. Thank you.

-------- I need all the variant thumbnail images to be hidden. Here are example screen mock-ups. I Would like the first four thumbnails of product w/ props to be showing and the rest of white backdrop variant images hidden. 

Once variant options are selected I would like the variant thumbnail to remain hidden but have the variant appear in the larger image. The end goal is to reduce the visual clutter of 20 variant thumbnail photos below the larger image at all times.

Hey Tuanphan, thanks for getting back. Example link is: https://www.raehcollection.com/shop/healing-gemstone-bracelet

Here are example screen moch-ups. Would like the first four thumbnails to be showing and the rest of variant images gone. 

Once variant options are selected I would like the variant image to only show up in the larger image.

Looking for css for same question as above. Hide thumbnail only. Keep larger image.

I'm working with the Brine template in 7.0

In this shop page-  https://www.raehcollection.com/shop/healing-gemstone-bracelet
when adding a variant image for a specific product it automatically appears in the product image thumbnails. I want to hide specific thumbnails (not all of them) so that the image only appears when that specific variant is selected. 

Does anyone know custom css that will allow this?