Changing spacing of portfolio images and titles on mobile (custom code needed!)

Hello! 

The homepage of my website has 2 portfolio images/links. On desktop the titles appear with hover, but I found some code on a different post from @tuanphan to force the titles to appear below the images on mobile (since the hover doesn't work there). I'll include the code at the bottom of my post in case it's helpful.

I have 3 questions about the mobile view with this modification:

1. Is there a way to get the title text closer to the image (or add more space under the text?) Right now the text is halfway between the two portfolio images which makes it hard to know which image the text goes with. I'll include a photo below showing this. 

2. Is it possible to get the side margins equal on mobile? Right now the right margin is a bit smaller than the left (see photo again). I think this is because of the border I added. 

3. Is it possible to increase the side margin padding of the portfolio images by about 3x just for the tablet view? (i.e. I would just apply this code for ~800-1024 pixel width devices). I will include a photo of the tablet view below as well. I don't like how the images go beyond the side margins of my header on the tablet version.

Website: andreakloehn.com      Password: flute43

Thanks for your help!!!

Here's the code I used:

/* Mobile-Portfolio title under image */
@media screen and (max-width:1024px) {
div#gridThumbs {
    display: block !important;
}
.portfolio-text {
    opacity: 1 !important;
    position: relative !important;
}

39 minutes ago, Andrea_K said:

Hello! 

The homepage of my website has 2 portfolio images/links. On desktop the titles appear with hover, but I found some code on a different post from @tuanphan to force the titles to appear below the images on mobile (since the hover doesn't work there). I'll include the code at the bottom of my post in case it's helpful.

I have 3 questions about the mobile view with this modification:

1. Is there a way to get the title text closer to the image (or add more space under the text?) Right now the text is halfway between the two portfolio images which makes it hard to know which image the text goes with. I'll include a photo below showing this. 

2. Is it possible to get the side margins equal on mobile? Right now the right margin is a bit smaller than the left (see photo again). I think this is because of the border I added. 

3. Is it possible to increase the side margin padding of the portfolio images by about 3x just for the tablet view? (i.e. I would just apply this code for ~800-1024 pixel width devices). I will include a photo of the tablet view below as well. I don't like how the images go beyond the side margins of my header on the tablet version.

Website: andreakloehn.com      Password: flute43

Thanks for your help!!!

Here's the code I used:

/* Mobile-Portfolio title under image */
@media screen and (max-width:1024px) {
div#gridThumbs {
    display: block !important;
}
.portfolio-text {
    opacity: 1 !important;
    position: relative !important;
}

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

[data-section-id="64c85ed9c39a405d205401fd"] {
  .grid-image {
    box-sizing: border-box !important;
  }
  @media only screen and (max-width: 767px) {
    .portfolio-text {
      padding-top: 1% !important;
      padding-bottom: 10% !important;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .grid-wrapper{
      padding-left: 6vw !important;
      padding-right: 6vw !important;
    }
  }
}

Thanks so much, that fixed 95% of the problem! The one issue that arose is that now the hover looks a little strange on desktop (screenshot attached below). When I added the code, it makes the border appear in a different place on hover. Any idea how to tweak this so it is a clean image on hover? Thanks in advance!!

That worked perfectly! Thank you so much!!

1 hour ago, Andrea_K said:

That worked perfectly! Thank you so much!!

Welcome!

Hello Squarespace community,

I have an issue related to this very topic: the homepage of my website https://www.talkiewalkie.ch/ works on desktop, but the text doesn't ajust properly on mobile (as shown on the screenshot below).

I tried to adjust the line spacing on mobile only but was unsuccessful so far. Does anyone have any idea ?

Thanks a lot!

On 2/29/2024 at 12:33 AM, Sido said:

Hello Squarespace community,

I have an issue related to this very topic: the homepage of my website https://www.talkiewalkie.ch/ works on desktop, but the text doesn't ajust properly on mobile (as shown on the screenshot below).

I tried to adjust the line spacing on mobile only but was unsuccessful so far. Does anyone have any idea ?

Thanks a lot!

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.portfolio-hover-item-title {
    line-height: 1 !important;
    margin: 1rem 0 !important;
}

Thank you very much @Web_Solutions 🙂