Jump to content

Customizing banner image size

Recommended Posts

Hiya,

 

Just wanted to know if there is a way to customise the banner size on my site depending on how large the window is and also if possible to customise for the mobile view too?

I have a video/show reel type thing playing in the banner and when the window isn't full screen or is in mobile view it only shows the middle of it which cuts out a lot of the faces in the shots.

 

Basically, is there a way to make sure the video is always formatted the same size on all platforms and screen sizes?

I don't think I explained that very well, but hopefully that makes sense?

 

Thank you in advance!

 

Anyways, here's what I mean from my site:

 

This is the main site page when it's full screen1133154643_Screenshot2021-03-23at11_29_33.thumb.png.14b0a61d80d0af0aac2e1c0358eb5bfa.png

 

This is with a narrower screen (there's a head missing on the right as you can see)

2075025934_Screenshot2021-03-23at11_29_54.thumb.png.3092c238ba95b3448956633c5d0c0f0f.png

 

Then this is mobile view, and it's clearly not got the full image

201716856_Screenshot2021-03-23at11_30_13.png.02ee9244d58c6a36ac7e9b1502a09972.png

Link to comment
  • Replies 4
  • Views 478
  • Created
  • Last Reply
On 3/26/2021 at 7:42 PM, ktbxter said:

site is

ktbaxter.com

password: website

 

thank you!

Try adding this to Design > Custom CSS(code for Cinemaphotography page)

/* resize mobile video cinemaphotography */
@media screen and (max-width:767px) {
[data-section-id="604b7448a8a00249612af754"] {
    min-height: unset !important;
    height: 30vh;
}
[data-section-id="604b7448a8a00249612af754"] iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

 

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

Archived

This topic is now archived and is closed to further replies.

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