tonicastudio

8 hours ago, Caroline_Smith said:

It looks like there is a CSS styling rule (probably in Design > Custom CSS) that looks like the following:

section[data-section-id="62132a7d18d299423224bd20"], section[data-section-id="62207da64930d71509a4ef6e"] .sqs-col-6 {
    border: 1px solid #fff;
    width: 40% !important;
    margin-left: 7%;
}

To fix the issue, just remove the "!important" tag from the width property so that it looks like this:

section[data-section-id="62132a7d18d299423224bd20"], section[data-section-id="62207da64930d71509a4ef6e"] .sqs-col-6 {
    border: 1px solid #fff;
    width: 40%;
    margin-left: 7%;
}

Hope this helps!

Yes this worked perfectly!! Thank you so much 🙂

Site URL: http://tonicabrandstudio.com/brand-strategy

I'm trying to fix this grid view on mobile so that the text is wider and centered. I'd even be ok with getting rid of the boxes altogether if need be. 
Thank you! 

Site URL: https://brightenmade.com/portfolio

Hi, wondering if anyone knows how to stagnate each post within a summary block so it looks like this? Thanks!

Does anyone know how to make the arrows in a summary carousel block look like this? And how to change the title text? 

Thank you!

https://www.januarymade.co.nz/vip-day

n 

Does anyone know how to create a text box like this with different fonts/font sizes within the same text block? 

Thank you!

6 minutes ago, tuanphan said:

Okay. I'm checking it again

@tuanphan thank you! and I just checked my site in an incognito browser and it's all working good on my end. Let me know if you have trouble accessing it now. 

12 minutes ago, creedon said:

That is the correct location but apparently your jQuery is not in Settings > Advanced > Code Injection > HEADER. It appears that your jQuery is installed in Settings > Advanced > Code Injection > FOOTER.

Amazing! I just c&p the jQuery you've provided into the header and now it works! Thank you so much!


I do have another question related to this if you get another moment to help. I've added the below code into design>css to decrease the portfolio section's height/padding, which worked perfectly. But now, the images/gifs are cut off on desktop (works fine on mobile). Any idea why that is? 

I've played around with different height values but it didn't seem to work. 

/* portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 50% !important;
}

10 minutes ago, creedon said:

Please see step two of the quick install instructions. You installed the code in Settings > Advanced > Code Injection > Header which is the incorrect location.

@creedon So I installed the code in the portfolio page> settings>advanced>page header code injection (second picture attached).

Sorry, do you mean the individual project page's settings? I just tried to insert it in the individual project's page  but there isn't a place to c&p the code? 

15 minutes ago, creedon said:

Ah now that I reflect that makes sense.

Please see Portfolio Project Link Remove.

You can skip the first quick install step as you already have jQuery installed.

Let us know how it goes.

@creedon hmm still doesn't seem to work. I copy and pasted the link exactly as is in the portfolio page's code header injection, but the link is still showing up  🤷‍♀️

9 minutes ago, creedon said:

Add the following to Design > Custom CSS.

[data-section-id="61ed52923ad0a2796cf80056"] .portfolio-hover-item {

  pointer-events : none;
  
  }

This is for v7.1 and specific the the poster's need.

Let us know how it goes.

@creedon so close! it does work, but now the images are not showing up at all or the background fill doesn't change colour.  

I've seen it done in the second section of this website if it helps:
https://standoutsquare.space/

@tuanphan thank you! Sorry, I have a couple of different threads going, asking questions in different places. 

But this works great, thank you so much!! But now, there's an issue with the images on hover. They are cutting in half on desktop, but working fine on mobile. any idea why that is?  

Site URL: http://tonicabrandstudio.com

I've added code to minimize the top and bottom padding on my portfolio section. But as soon as I added in the code, the images that show up on hover cut in half on desktop (shows up fine on mobile). Anyone have an idea what's going on here? I've messed around with different height values etc but nothing seemed to work. 

site: tonicabrandstudio.com
pw: australia
menu > example
 

Here's the code that I've used to remove the portfolio section: 

/* portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 50% !important;
}
}

Thank you!

On 12/10/2021 at 3:37 AM, creedon said:

@creedon

Add the following to Design > Custom CSS.

/* begin services menu no links */

  /* desktop */
  
  .header-nav .header-nav-item--folder > [href="/services"] + .header-nav-folder-content .header-nav-folder-item {
  
    pointer-events : none;
    
    }
    
  /* mobile */
  
  .header-menu-nav-folder[data-folder="/services"] .header-menu-nav-item--external {
  
    pointer-events : none;
    
    }
    
  /* end services menu no links */

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Hey, is it possible to do something like this for portfolio sections? I am using a portfolio on hover where gifs are showing as the picture but would like to make those individual project links unclickable. 

site: tonicabrandstudio.com
pw: australia

then go to menu>example.

Thank you!

15 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Example page portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 100% !important;
}
}

 

@tuanphan Amazing!! You're a life saver thank you! 

That fixed the padding, but there is one issue... The Images are cut in half now on desktop, but showing up fine on mobile. Any idea why that is? 

This is the updated code that I've slightly changed. I even messed around with the heights to see if that was the problem but the images are still cutting on in desktop view. 
 

/* Example page portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 50% !important;
}
}

Oh btw, I've since removed the above code you've provided. So now you'll see the text sits in the middle of the section once again with excessive padding on top and bottom. Just trying to get rid of the padding.

1 minute ago, tuanphan said:

Can you share link to a page where you want to reduce padding? I think we need another code.

for sure: https://www.tonicabrandstudio.com/example

password: australia

If the direct link doesn't work just to go menu>example. 

Thanks!

Site URL: http://tonicabrandstudio.com

I'm trying to decrease/remove the top and bottom padding on this portfolio section, as shown in the attached picture. Any ideas how to do this?

Q2: is there a way to insert text into a portfolio section? If not, I guess I can just add another section on top once the padding is removed.  

Right now I have the portfolio set to hover: follow cursor

site: tonicabrandstudio.com
pw: australia 
go to menu>example 

Thank you!!

13 hours ago, bangank36 said:

Can your share the link to your site?

www.tonicabrandstudio.com 

password: australia

you can go to menu > example page. 

I've actually figured out how to add the border/etc but now I have a section padding issue. I've tried so many codes to try and reduce the padding on the top and bottom. Do you have any ideas how to do this?

Thank you!

On 11/12/2020 at 6:32 AM, mess_cal said:

Try this CSS out!

.portfolio-hover-display {
    margin-top: -200px;
}

 

Hey there, this worked perfectly! Thanks! I have the same question, can you remove the padding from the bottom as well? I thought it would be as simple as adding margin-bottom but doesn't seem to be working. Thank you!

On 11/12/2021 at 10:22 AM, angelrat3000 said:

I found the solution to my issue -

I used this code to change the font of my portfolio titles and also change the font size

//portfolio title font//
h1.portfolio-hover-item-title {font-family: 'Lydia' !important;} 
h1.portfolio-hover-item-title {font-size: calc(6.6vw + 5rem) !important;}

Ah this is amazing! Thank you!

I'm wondering if you know how to add a border around the text like in this picture? And how to change colour on hover?