Jump to content

Looking for some help with my portfolio grid on the homepage

Go to solution Solved by tuanphan,

Recommended Posts

Hello

I'm looking to change my homepage by utilizing the negative space by adding some text since I have an odd amount of projects. The link to my site has the current layout and I have attached a picture of a rough idea of what I am trying to accomplish instead.

I am pretty sure would have to inject custom code so would appreciate some help on this as I am a novice when it comes to coding.

Thanks!

Screenshot 2024-05-22 103251.png

Link to comment

Hello,

Can you add the link of your site so I can have a look at the current state?

Link to comment

@aksoma15, something like this?

If you want this look only on the homepage add the below code in Page settings -> Advanced > Code injection
 

<style>
.portfolio-text {
    opacity : 1!important;
    padding-top : 5px!important;
    position : static!important;
}
</style>

If you want it on all such components through the site add the below code in Custom CSS
 

.portfolio-text {
    opacity : 1!important;
    padding-top : 5px!important;
    position : static!important;
}

 

Screenshot 2024-05-25 at 16.45.38.png

Screenshot 2024-05-25 at 16.47.20.png

Link to comment

You want the text to fill the entire space on mouse hover?
If you add the text from the control panel it should behave like that

Link to comment

@sorca_marian I would like the text to fill the entire space but not appear only on mouse hover actually. I want the text to appear in the negative space of the top right of the grid when opening the site, same as my header text. the challenge reaaranging the grid to my specifications and adding the text to the negative space as specified in my screenshot.

Link to comment
  • Solution

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a class="grid-item grid-custom-text"><span>You know what? It is beets. I have crashed into a beet truck. Jaguar shark! So tell me - does it really exist?</span></a>').prependTo('div#gridThumbs');
});
</script>
<style>
a.grid-item.grid-custom-text {
    position: relative;
}
a.grid-item.grid-custom-text span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
</style>

image.thumb.png.5acb15594b4360b09b3c97900aa659d0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan thank you for your help we are starting to get on the right track.

I am looking to make another page with the same portfolio layout but the code-injected text from this page is showing up there as well and I would like that page to behave independently. Any idea how to do this?

site password: aksomaiah

Link to comment
On 5/28/2024 at 6:34 AM, aksoma15 said:

@tuanphan thank you for your help we are starting to get on the right track.

I am looking to make another page with the same portfolio layout but the code-injected text from this page is showing up there as well and I would like that page to behave independently. Any idea how to do this?

site password: aksomaiah

You can move code to Page Header Code Injection.

Page Header1 Min

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.