Jump to content

Help with image description and scroll bar fix

Recommended Posts

Posted
 
Hi there
 
I please need help with setting up a description text under an image. On the following landingpage, the small text under the image "Franziska Mulle, lic.iur., Rechtsanwältin und Mediatorin SAV" has a wrong behaviour on mobile view of ipad (portrait). I wanted to do a workaround and change it into a image description text, so it is belonging to the image. But can't figure out how.
 
Second adjustment would be to have the logo fixed at scrolling, but the CTA button "Kontakt" not. Is there a custom code for that?
 
PW: SF2022
 
Many thanks and best
Sibylle
 
Posted

Tricky problem, a disappointment that Squarespace no longer has image captions.

You could change the image setting in two ways to help this, neither is perfect, but you may be happier with one than the current situation.

1. change the image in the block settings to Fill instead of Fit. Or

2. change the block alignment to bottom instead of middle (click on the image block and adjust the setting in the little popup)

I hope one of those helps you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
1 hour ago, Ziggy said:

Tricky problem, a disappointment that Squarespace no longer has image captions.

You could change the image setting in two ways to help this, neither is perfect, but you may be happier with one than the current situation.

1. change the image in the block settings to Fill instead of Fit. Or

2. change the block alignment to bottom instead of middle (click on the image block and adjust the setting in the little popup)

I hope one of those helps you!

Hi Ziggy, thank you very much. I will try it out.

Have you also seen my second questions regarding the fixes logo at scrolling?

Thank you and best

Sibylle

Posted

Having just the logo fixed may be problematic, not something I've tested, and my feeling is that it won't work well. I will try and test a solution and see if it can work. Ping me on this thread tomorrow if I don't get back to you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
11 hours ago, Ziggy said:

Having just the logo fixed may be problematic, not something I've tested, and my feeling is that it won't work well. I will try and test a solution and see if it can work. Ping me on this thread tomorrow if I don't get back to you!

Thank you @Ziggy . That would be great.
My client would like to have the logo on desktop fixed - the CTA button not. And in mobile nothing fixed. I know it is a bit tricky, but I really hope to find a solution.

For the first question I changed the image settings to fill but nothing changes. And your proposal 2, I can't find.
Any other ideas? Please find a screenshot attached.

Thanks
Sibylle

IMG_0744.PNG

Posted

Try adding this Custom CSS:

@media only screen and (min-width:768px) {
  .header-title-logo img {
    position: fixed;
    top: 20px;
  }
}

Let me know how that works! Give me a thumbs up if it does, thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
3 minutes ago, Ziggy said:

Try adding this Custom CSS:

@media only screen and (min-width:768px) {
  .header-title-logo img {
    position: fixed;
    top: 20px;
  }
}

Let me know how that works! Give me a thumbs up if it does, thanks!

YES, it worked! Thanks.

Posted

Hi Ziggy

Did you try anything regarding the image description yet?

We now went online with the website, but besides the problem in responsive, the description text is not aligned to the left. Can you please help me with that as well?

Thanks
Sibylle

Posted
On 11/28/2022 at 6:25 PM, Ziggy said:

You could change the image setting in two ways to help this, neither is perfect, but you may be happier with one than the current situation.

1. change the image in the block settings to Fill instead of Fit. Or

2. change the block alignment to bottom instead of middle (click on the image block and adjust the setting in the little popup)

Did you try either of these suggestions?

Changing the image to fill will help the alignment, and changing the alignment to bottom and left would help as well.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
On 11/29/2022 at 9:51 AM, orneverornow said:

Thank you @Ziggy . That would be great.
My client would like to have the logo on desktop fixed - the CTA button not. And in mobile nothing fixed. I know it is a bit tricky, but I really hope to find a solution.

For the first question I changed the image settings to fill but nothing changes. And your proposal 2, I can't find.
Any other ideas? Please find a screenshot attached.

Thanks
Sibylle

IMG_0744.PNG

@Ziggy Yes, I replied on that here in the second paragraph.

You can find the trial url here: https://mulle-legal.squarespace.com/landingpage2
With "fill" it works, but the image shape looks wrong in responsive. Changing the alignment to bottom or left, I did not find where to do.

Thank you
Sibylle

Posted

Click on the image and the alignment options are in this little pop-up, see here:

image.png.1093253d8c8f6a51c8f98c67e4749bce.png

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
11 minutes ago, Ziggy said:

Click on the image and the alignment options are in this little pop-up, see here:

image.png.1093253d8c8f6a51c8f98c67e4749bce.png

 

You are great. That worked @Ziggy :)))) 

On all the devices it looks good now. Only problem is still iPad portrait view. If you have one last solution for that (see the screenshot attached), then I would be more than happy. Everything should be more up and image/description centered. If not, no problem. I hope people look mostly on landscape view.

Thanks
Sibylle

IMG_21B5AA2CE7F8-1.jpeg

Posted

There's not much I can do about that without setting the image to fill the space, sorry.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.