threadsonline

Ah yes of course, thank you worked perfectly!

Hi Tuan, I want that last carousel to only display one column but it's showing two as I am using a code to display 2 columns on the other carousels.

Hi Tuan, I have now sorted this myself, no need to worry! Here are the codes I used if anyone was wondering: // Hide slideshow controls on Desktop .desktop-arrows.arrow-container{ display : none; } // Hide slideshow controls on Mobile .mobile-arrow-button.mobile-arrow-button{ display : none; }

Hiya, thanks for your css suggestion. Unfortunately this didn't work properly for me but i went with the second approach (not sure why I didn't think of just doing that in the first place!) thanks!

Hm unfortunately this doesn't seem to be working... I replaced my old code with this one but it didn't change anything. Any other ideas? I've checked the rest of my custom css and I don't think I have any conflicting codes running. P.S. The section ID you used in your code was actually for a different section, not the third carousel (the third carousel on my homepage is actually hidden on desktop view, so there is 2 carousels on desktop but 3 on mobile). Of course I just replaced this with the section ID of the third carousel (below), but nevertheless this didn't work. section[data-section-id="664f1c4cc443c128632ff36b"] Thanks for your time!

Perfect, thank you!!

Hi guys, I have a slideshow as the first section on my homepage. I have used the below custom code to shorten the length of the slideshow on mobile view. //Decrease slideshow height on mobile @media screen and (max-width:767px) { .user-items-list-banner-slideshow { height: 50vh !important; } } This has worked well, however I was wondering if a code can be used to resize/adjust the placement of the images on mobile view only? The slideshow images look great on desktop, but they're only showing a fraction/zoomed in on mobile. I will attach screenshots for reference. Thanks! site: https://threadsonline.co.uk/ password: welcome

Hi guys, I am using some custom css to change the word 'login' to an icon. This has worked, apart from when i hover over the icon, the word 'login' appears. This may be because i am using another code to highlight my header navigations in red upon hover. How do i get the codes to not conflict, as I do not want the word 'login' to appear on hover. Please see codes I am currently using below: //Change 'login' from text to icon a.user-accounts-text-link { background-image: url(https://images.squarespace-cdn.com/content/v1/63a1cbd8a8a1d321d19b9b71/3b69346d-5e04-46eb-86a4-5b3595151c4f/login.png?format=500w) !important; background-size: contain; background-position: center; background-repeat: no-repeat; color: Transparent !important; height: 23px } //Bold & red header categories on hover .header-nav-item>a:hover { font-weight: bold !important; color: red !important; } .header-nav-folder-item:hover a { font-weight: bold !important; color: red !important; } I will attach some screenshots of whats happening below. site: https://threadsonline.co.uk/ password: welcome Thanks!

site: https://threadsonline.co.uk/ password: welcome

Hi guys, I am currently using the following code so that on mobile display my carousels show up 2 columns rather then 1. @media screen and (max-width:767px) { body.homepage ul.user-items-list-carousel__slides { grid-template-columns: repeat(2,1fr) !important; } } I have three carousels on my home page, the first two are the ones I want to use the above code for, but I want the last carousel to only show 1 column at a time. However, because of the code, all three carousels are showing 2 columns. How do I get the last carousel to be excluded from the above code? Site: https://threadsonline.co.uk/ Password: welcome

Hi, I am trying to remove/hide the controls on my slideshow which is the first section on my home page. Previously I have changed the controls from arrows to circles, but now I just want the controls hidden completely. I have tried this code but no luck: .gallery-slideshow-controls { display : none; } An important thing to note is that I have a code injection making the slideshow move automatically, so I am not sure if this is affecting the custom css. Thanks!

Hi @tuanphan - after an hour of tweaks I have fixed the above issue, thanks for all your help anyway!

Thanks 🙂 In regards to the accordion issue, I put this code into the footer injection in order to move the accordion from the footer into the product page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('footer.sections .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper'); }) </script> But the issue is - I have 2 accordions in my footer but only want one of them to show on the product page. We have managed to do this so far, but now the accordion I actually want showing in my footer (in mobile view only) has disappeared. You can see on mobile view that there is a big white gap in my footer, this is where the accordion is but it is hidden for some reason.

Hi Tuan, all worked great thank you! Could you advise how I decrease the gap between the description & price/title on mobile please? Also in regards to the accordion I think you may have missed my message above. Your code removed the additional accordion from my product page which I wanted, but it has also hidden it from the footer as well (you can see there is a big white gap on mobile display in the footer, this is where the accordion is but the ode has hidden it). How can I get it to show only in the footer?

Hi Tuan, I have just realised it has now hidden the accordion from the footer as well as the product page, but I need it to display in the footer.