Jump to content

Stop Autoscalling video background on Homepage 7.1

Recommended Posts

Hello,

I've been migrating my site from 7.0 www.amorylujo.com to 7.1 for a month.

This is the result:

https://amorylujo.squarespace.com/

Password: Amor

All of this only to create a homepage with 2 titles and 5 buttons.

Now, I have an issue with the auto-scaling elements´ sizes of the new homepage.

How can I disable the resize command to avoid this to happens:

- Desktop 1920/1080 Full screen view:

image.thumb.png.2ffbd30f71e57f193d86acaccedcc37b.png

 

- Desktop 1920/1080 3/4 screen - Still no Resize - OKimage.thumb.png.73b77ecca45bb7975cd7ceb05966b516.png

 

 Desktop 1920/1080 Half screen size view - Error (Horror)

image.thumb.png.ef7789f8f44bf62120e35058421548af.png

 

Here on MacBook 13´´ 

image.thumb.png.f1ca2d3bbcce26c0635ad161f80e0619.png

 

We need kind of the same resize method to the old landing cover in 7.0 www.amorylujo.com but where you can't place more than 1 title or 2 buttons.image.thumb.png.aaf15155900b632f546518db6c8c42aa.png

image.thumb.png.d7ff25ad816409bf22968f14a85b1f13.png

 

image.thumb.png.e8b705fd94e4bd59539ef764eaa255af.png

 

Please ask me any detail I may not have been able to explain. We would greatly appreciate any help you can provide.

Thanks

A&L

 

 

 

image.png

Link to comment

I think in general terms you need to make each button block wider (without overlapping) so you may want to play with left/center/right alignment to get them closer together. Reducing the content width would be helpful. I would also suggest stacking the buttons on mobile.

If you can't get the buttons to work, then you may get better results by using text links and adding some simple CSS to style them.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
14 hours ago, Ziggy said:

I think in general terms you need to make each button block wider (without overlapping) so you may want to play with left/center/right alignment to get them closer together. Reducing the content width would be helpful. I would also suggest stacking the buttons on mobile.

If you can't get the buttons to work, then you may get better results by using text links and adding some simple CSS to style them.

Good morning Ziggy, first of all, thank you very much for the help.

My main concern is the white stripe you see under the background video when you decrease the size.
Thanks for the information about the buttons, I will investigate options

Link to comment
12 minutes ago, AmoryLujo said:

My main concern is the white stripe you see under the background video when you decrease the size.

The white strip is due to the section height not being large enough to cover the page and therefore the page background shows.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You may need to use this code since you have the section set to fill:

section[data-section-id="657881e069522a652470efa8"] {
  min-height: 100vh !important;
}

 

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
20 minutes ago, Ziggy said:

You may need to use this code since you have the section set to fill:

section[data-section-id="657881e069522a652470efa8"] {
  min-height: 100vh !important;
}

 

Bravo, it worked perfect for the background.

I'll do different tests with the buttons and be back.

Thank you very much

Link to comment

Looks good.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
4 hours ago, Ziggy said:

You may need to use this code since you have the section set to fill:

section[data-section-id="657881e069522a652470efa8"] {
  min-height: 100vh !important;
}

 

Can this code be applied to all buttons of this page? with proper Id Block and limiting the maximum and minimum size?

 

Edited by AmoryLujo
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.