tuanphan

#1. #2. Use this CSS (don't remove any code in your current code)

/* Footer map block */
div#block-da6ff92c5ffb1f78d051 {
    padding: 0px !important;
}
html, body {overflow-x:hidden;}

On 1/13/2022 at 10:54 AM, SSchulze said:

Works fantastic! You guys are the best.  Just one more question.  How can I add white space below where it says "continue shopping" and the footer in purple?

Use this CSS

div#sqs-cart-container {
    padding-bottom: 40px;
}

Can you share link to page in screenshot? We can help easier

On 1/13/2022 at 10:04 AM, GSaad said:

Unfortunately it's still doesn't seem to work. When I am in the Custom CSS screen it shows and as soon as I save it and refresh the page it disappears again.

 

It looks like Animation conflict with the code, try this new code

@media screen and (min-width: 768px) {
    #block-yui_3_17_2_1_1638761244808_11129>div {
        column-count:6;
        column-gap: 25px;
    }
#block-yui_3_17_2_1_1638761244808_11129 * {
    opacity: 1 !important;
    transform: unset !important;
}
}

@media screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1638761244808_11129>div {
        column-count:2;
        column-gap: 20px;
    }
#block-yui_3_17_2_1_1638761244808_11129 * {
    opacity: 1 !important;
    transform: unset !important;
}
}

On 1/13/2022 at 8:08 AM, HelenDownUnder said:

Sorry sound a bit niave, but WHERE do we put these codes ... I have the same problem!

 

Design > Custom CSS

On 1/13/2022 at 5:42 AM, laurensmithart said:

The code works great for the columns; however when I click on an item in the list it not only opens itself but another item as well. Can you check the glitch out and let me know if there's any code to correct this?

https://www.thehost.co/product-recommendations

 

Remove above & try this new code

/* product recommendations */
@media screen and (min-width:768px) {
.tabs {
    column-count: 2;
}
}

On 1/13/2022 at 5:32 AM, kayla13 said:

Site URL: https://www.venturacoach.com/why-coaching

I have a card carousel section in several pages on my website and they display fine on desktop but when I go to mobile I have to click an arrow to scroll through them and I want the cards to be displayed when I scroll down (vertically) instead of having to click an arrow. Does anyone have code for this? I've seen some code for blog posts but not for carousels. 

Thanks!

Add to Design > Custom CSS

/* list carousel on mobile */
@media screen and (max-width:767px) {
ul.user-items-list-carousel__slides.user-items-list-carousel__slides--initialized {
    display: block !important;
}
li.user-items-list-carousel__slide.list-item.list-item-basic-animation {
    transform: unset !important;
    margin-bottom: 20px;
}
}

On 1/13/2022 at 4:36 AM, misadventure said:

Site URL: https://misadventure.co/shopping-direction

I am trying to center a select dropdown in a from block and cannot figure out the css to do so. Can anyone help me? I have been able to center the text and submit buttons, but not the form field itself.

It looks like you removed it? I don't see it now

section:first-child = first section on Main Content + first section on Footer

You should change it to

@media screen and (max-width:767px) {
.homepage article section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

(this code will target first section on Homepage Main Content Only)

Try this code

@media screen and (max-width:767px) {
#block-daf805861a202b50ee14 H7 {
    background-color: rgba(48,42,34,.1);
    display: block;
}
div#block-daf805861a202b50ee14 {
    background-color: unset;
}
}

(In the future, you should use h1 to h6. H7 doesn't exist)

On 1/13/2022 at 3:31 AM, Poppyseeds said:

You are the king!!!

I modified this a bit:

#block-8b839941f5d796fbef77 .design-layout-inline img {
  margin-right: 0 !important;
  top: 0 !important;
  height: auto !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  border: 1.5px solid #968F87;
  padding: 4.5% !important;
}

 

I'm ultimately trying for a box type of effect like in the original photo, but am only getting two sides. Spent well over an hour trying to get it right...

But, alas. 

And I have to have this site done by Friday. I'm so lost!

Thank you, Tuan.

You mean

You mean, you want border same as first image?

I solved same cases for lot of members. If you can setup site access password & share url again, we can help easier (Your site is private now)

Hi,

You can add 2 pages to Main Navigation, then we will give the code to remove them on Desktop Only.

On 1/13/2022 at 2:57 AM, John_Isaacson said:

great, 

this is working, how do i get it to work on all forms throughout my site?  is it linked to the collection. id also like to add a little spacing between the title and the text. thanks so much for your help.

Same text for all form or different?

Hi. What is password?

You set line height of title 0em, adjust it

or add this to Design > Custom CSS

.BlogList-item-title {
    line-height: 30px !important;
}

It looks like you removed View case study for Whip Up?

I don't see any accordions

Just sent the code. You can check.

14 hours ago, AndrewFreedMusic said:

Hey Tuan! This didn't work 😞

Can you share link to page where you use accordion & keep above code?

On 1/13/2022 at 1:47 AM, jwbranton171 said:

is there a way to do this with the header/menu still transparant/overlayed over the image?

What is site url?

Try dragging Text 1 below Image 1 so that it appears a black line, width of line = width of text/image blocks
Do similar for text 2, image 2, then check again on mobile.

Add to Design > Custom CSS

/* list item description */
.user-items-list-item-container[data-section-id="61d59eb8e4953946a45a6bc4"] .list-item-content__description p {
    font-size: 15px;
}

On 1/12/2022 at 11:30 PM, JennaM said:

Thank you, here are the links...

https://spiritedagency.co.uk/ https://spiritedagency.co.uk/our-brands/portofino

The copy underneath the square images and then the arrow text on the brand pages.

Use this CSS

h3, h2 {
    font-family: 'Italian Plate No2' !important;
}

On 1/12/2022 at 11:13 PM, curingmom said:

Site URL: https://www.curingmom.com/cart

I recently received an email from customer stating she was unable to access her shopping cart to checkout. I found that my Shopping Cart title and items list begin showing quite far down the page. I instructed her to scroll down and she would find it. How do I remove all that space or add a page image or something to fix this?

Add to Design > Custom CSS

/* remove cart empty large header */
body#cart div#banner-area {
    display: none;
}

On 1/12/2022 at 7:40 PM, stim said:

Hi tuanphan,

Can I share it to you directly rather than publically? 

Thanks. 

 

You mean this? https://www.loom.com/share/8aafe5d3cff542d0a99d1afae732cd95