Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gallery Titles: adding a line + subtitle, adjusting font size


elwin5000

Question

Site URL: https://sentimentstudios.com

Hi @tuanphan, for my the showcase gallery on the homepage of sentimentstudios.com (pw: concept) I am looking to do the following adjustments, as to make the text work as well as on sentimentstudios.com/work;

- adding a text row in the title (half of each title disappears on mobile)
- adding a subtitle (client name)
- changing font size of title
- create hover effect "zoom" like on portfolio (sentimentstudios.com/zoom)

Could you help me achieve this? Much thanks in advance! 

Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

#1. Zoom effect

The page doesn't exist

#2. Title/Subtitle

You mean like this?

Screenshot_4.thumb.png.f69ae1053003ef041ca798b6ad48fc1d.png

#3. I don't quite understand. Can you describe in more detail?

adding a text row in the title (half of each title disappears on mobile)

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi @tuanphan! Thank you for your efforts! All questions regard the gallery block "Work" on my homepage https://www.sentimentstudios.com (pw: concept). Allow me to clarify my questions.

1. Zoom effect: as seen on my portfolio page https://www.sentimentstudios.com/work (pw: concept) I chose squarespace's hover effect "zoom". Is this effect or a similar effect possible on the Gallery block of my homepage? 

2. Title and Subtitle: my wish would be to have a larger font title than currently and a smaller font below with the client name. Like this:

Project title 
Client name

3. Adding a text row for the title: As seen on attached screenshot, the largest part of the project title is invisible in mobile view. As such, I would like to add a text line for the titles to make sure the titles can be read. Would that be possible?

Much thanks in advance for your help!

Screenshot 2022-07-17 at 11.54.11.png

Link to comment
  • 0
22 hours ago, elwinstevelink said:

Hi @tuanphan! Thank you for your efforts! All questions regard the gallery block "Work" on my homepage https://www.sentimentstudios.com (pw: concept). Allow me to clarify my questions.

1. Zoom effect: as seen on my portfolio page https://www.sentimentstudios.com/work (pw: concept) I chose squarespace's hover effect "zoom". Is this effect or a similar effect possible on the Gallery block of my homepage? 

2. Title and Subtitle: my wish would be to have a larger font title than currently and a smaller font below with the client name. Like this:

Project title 
Client name

3. Adding a text row for the title: As seen on attached screenshot, the largest part of the project title is invisible in mobile view. As such, I would like to add a text line for the titles to make sure the titles can be read. Would that be possible?

Much thanks in advance for your help!

Screenshot 2022-07-17 at 11.54.11.png

#1. Add to Design > Custom CSS

/* Homepage Images Zoom */
body.homepage .slide:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}
body.homepage .slide img {
    transition: all 0.3s;
}

#2. First, add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  body.homepage .image-slide-title {
    font-size: 18px !important;
}
body.homepage .image-slide-title em {
    font-style: normal;
    display: block;
    font-size: 12px;
}
</style>

Next, edit your Image Title, from this text

Placing human needs at the heart of a fintech company

to this

Placing human needs at the heart of a fintech company <em> here is line 2</em>

You will have

image.thumb.png.70155c4f27ecb27424407cc30f9883d4.png

#3. Add to Design > Custom CSS

@media screen and (max-width:640px) {
.image-slide-title {
    white-space: initial !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...