Jump to content

Problem with animation portfolio grid subtitles

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://www.loisartz.com/

Hi all,
I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

I have used span to separate title and subtitle of the project.

image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

This is the code:

CODE INJECTION

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $("h3.portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

CSS

h3.portfolio-title span {
    display: block;
    font-size: 21px;
  font-weight: 10 !important;
  margin-top:-6px
    
}
h3.portfolio-title {
    font-size: 33px !important;
    font-weight: medium !important;
    color: white !important;
}

 

And it should always come out like this

image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

How can I solve it?

Thanks a lot ♥♥

image.png

Edited by loisartz
Link to comment
  • Replies 2
  • Views 292
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • loisartz changed the title to Problem with animation portfolio grid subtitles
  • Solution
5 hours ago, loisartz said:

When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

I was unable to reproduce the error you describe. I reloaded more than three times.

I did notice some potential issues.

Your portfolio project titles appear not to have HTML ( no span tags ) in them so the following code is not currently doing anything.

<script>
  $(document).ready(function(){
  $("h3.portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

I suggest commenting it out or removing it ( make a copy somewhere ).

It appears you are adding the sub-titles with CSS so there is not need to use Javascript to alter the titles.

a.grid-item[href*="/spino"] h3:after {
    content: "Identidad visual y diseño de marca";
    font-size: 23px !important;
    font-weight: 400 !important;
    display: block
}

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.