tuanphan

On 3/14/2023 at 7:55 PM, DreamrW said:

How do I make the burger menu on mobile white on the homepage also please? 🙏

Use this code

@media screen and (max-width:767px) {
	body.homepage .burger-inner>div {
	background-color: white !important;
}
}

On 3/14/2023 at 7:42 PM, vinniemac said:

What I'm trying to achieve is each navigation item on a separate line

Workshops

Buy Prints

Galleries

etc etc

Text left justified, but centred between the logo and the shopping cart icons.

Use this new code

/* Force desktop menu on Tablet - Version 1 */
@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
    .header-nav nav {
        flex-direction: column;
    }
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
    .showOnMobile .header-actions-action.header-actions-action--cart {
    display: none;
}
}

Hi,

What is site url?

On 3/14/2023 at 6:41 PM, ANDREASPHOTO said:

Can I have this code?

Yes. You can add then share link to your site, we can check & give the code

On 3/14/2023 at 6:02 PM, JonnyIlsley said:

Did anyone find a solution to this? 

I am trying to achieve something similar using the :not function however for a summary block.

Thanks

This is my current code:

 

//Hover Summary Blocks of Project Thumnails - Summary Block Appearance//
@media screen and (min-width:800px){
  .summary-item:not(#block-yui_3_17_2_1_1678287406551_217495) {
    //only use position relative with carousel summary block
    position: relative;

    img {
      //transition: all .5s ease!important;
    }

    .summary-content {
      position: absolute;
      color: #fff!important;
      top: 50%;
      left: 50%;
      width: 80%;
      opacity: 0!important;
      pointer-events: none;
      transition: all .5s ease!important;
      transform: translate(-50%, -50%)!important;
      -webkit-transform: translate(-50%, -50%)!important;
      -ms-transform: translate(-50%, -50%)!important;
      -moz-transform: translate(-50%, -50%)!important;
    }
    .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt   {
      color: #fff!important;
    }
  }
  .summary-item:hover {
    img {
      -webkit-filter: brightness(25%);
      filter: brightness(25%);
    }

    .summary-content {
      opacity: 1!important;
    }
  }
}
 

 

Change this class name

.summary-item:not(#block-yui_3_17_2_1_1678287406551_217495)

to this

.summary-v2-block:not(#block-yui_3_17_2_1_1678287406551_217495)

On 3/14/2023 at 5:57 PM, LostAndFurious said:

Hi, 

Does anyone knows if there is a way to make this work on every slideshows on the whole website ? 

Or do I have to populate the css for every single galleries ? (I have many...)

Thanks a lot for your answers!

Depend on the case. If you share link to some gallery slideshows on your site, we can check easier

On 3/14/2023 at 12:05 PM, Swandre said:

solved the extra margin thanks to this post: 

 

I'm still having the issues with the landscape view layout squeezing images and buttons, also buttons aren't centered. Thank you 🙂

 

Landscape looks fine. What is problem here?

On 3/14/2023 at 12:04 PM, mukr said:

I made a gif for the fallback image. I don't want to use a screenshot. Any other ideas or coding on solving issue 1?

If you share site url, we can check & give code easier

On 3/14/2023 at 12:44 AM, Vessall said:

This is the exact embedded code I am using from webiste toolbox


<!--Begin Website Toolbox Community Embed Code-->
<div id="wtEmbedCode"><script type="text/javascript" id="embedded_forum" src="https://forum.vessall.com/js/mb/embed.js" data-version="1.1" ></script>
<noscript><a href="https://forum.vessall.com/">Vessall Boating Community </a></noscript></div>
<!--End Website Toolbox Community Embed Code-->
 

Hi,

You try adding this code to Page Header (Page where you will use Forum) instead of using Site wide Code Injection

You can use this new code

/* footer links hover color */
footer.sections a:hover span {
           color: #F2BA40 !important;
}

Hi,

This is possible. Do it for homepage or which page?

On 3/14/2023 at 5:38 AM, studiojacandco said:

That's much better, thank you!!

Do you know how I can make the related product image/s the same size & shape as the product image? Currently the main product is square but my related product is portrait/rectangle.

Add to Design > Custom CSS

/* Related Products */
.ProductItem-relatedProducts .grid-image-wrapper {
    padding-bottom: 100% !important;
}

On 3/14/2023 at 4:42 AM, freedomfung852 said:

Hi Tuan, yes that's correct - only moving the "An inspiring read...beautifully." text to be above the image, while the position of the rest stays the same.

Thanks again
Freeman

Try this new CSS code

#block-yui_3_17_2_1_1671854349186_13556 .summary-title {
    position: absolute;
    top: -33px;
    left: 0;
    width: 100%;
}
#block-yui_3_17_2_1_1671854349186_13556 .summary-item {
    position: relative;
}

On 3/14/2023 at 12:06 AM, HamishC said:

sorry for my late reply, yes font name, font size and color please. 

Add to Design > custom CSS

span.c-tabs__tab-title {
    font-family: monospace;
    font-size: 30px;
    color: #f1f;
}

On 3/13/2023 at 11:46 PM, dieslaughing said:

 

#1. THANK YOU, worked like a charm.

#2: I would like to have the details be: Product Name, Price, Details, Accordion, then Quantity and Add to Cart on same line.

#3: Unfortunately this didn't work for me; attaching screenshot of what happened. 

Thank you so much, @tuanphan!

#2. Don't remove any code in your current code. Add this to Design > Custom CSS
 

/* Mobile Product Detail Order */
@media screen and (max-width:767px) {
.ProductItem-details-excerpt {
    order: 2 !important;
}
}

#3. Use this CSS code

@media screen and (max-width:767px) {
     .sqs-add-to-cart-button-wrapper {
        width:70% !important;
        float: left;
        margin-bottom: 0 !important;
        position: relative;
        bottom: 100px;
        right: 0;
        left: 110px;
    }
    .product-quantity-input {
        width: 30% !important;
        float: left !important;
    }
}

Hi,

Can you share link to page where you use video block? We can check easier

On 3/14/2023 at 4:12 AM, kkester said:

Thanks! So I added it and it looks great, however it doesn't link to the event page. What am I doing wrong? 

https://tivoliartistsgallery.com/exhibit-schedule/#current

Remove it & use this new code

body#collection-63568b0531815f2ea12da3eb .summary-title-link:after {
    content: "Read more";
    font-size: 14px;
    color: var(--paragraphLinkColor);
    font-family: Work Sans;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    position: absolute;
    bottom: 20px;
    left:0;  
}

Hi,

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

On 3/14/2023 at 3:34 AM, NMcMurray said:

Thanks Tuan, that worked great. One last question, on some pages i need the background to be half navy and half white ( like the home page), but on others the navy needs to go all the way across (which is what the above code does). How would I apply the colour to only half the section? 

Thanks again!

Hi,

Can you share link to 2 pages? We can test code easier

On 3/14/2023 at 2:34 AM, cahillcreative said:

Hello there! 
I'm having this same issues with text on buttons wrapping. The CSS above isn't affecting any change. Anyone know of a fix for this issue?

Thanks!

If you share link to page where you have problem, we can check easier

Can you enable announcement bar + Which code did you use to add font to this bar?

On 3/14/2023 at 2:27 AM, skalison said:

@tuanphanThanks for the suggestion! Do you mind elaborating on how I could do this?

You can do it by yourself, If you still can't do it, let me know, I can do a quick guide video

Try this code instead (replace Line 9 - 12 with this code)

h1, h2, h3, h4 {
font-family: 'Cotta Free' !important;
}

Hi,

Do you have a mockup or example? We can imagine easier

Hi,

You should contact SquareKicker, they can check your site & troubleshoot problem. We difficult to help you with this case.