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

Full-width: video, img on desktop & mobile

Question

Posted (edited)

Site URL: https://pufferfish-lion-mkrm.squarespace.com/

I am using the Nolan template.

To display a full width video with no padding on top so it sticks on top of the section, what code do I need to inject in the css ? I tried some code and it seems ok-ish but not sure. For the padding on top it seems in particular challenging for mobile, think I need some more specific code there.

General site-spacing I am using: 

  • Page-width max: 2400px
  • Page Margin: 2vw

Besides the video I would like to adapt another section with image-stacks to full width images on the mobile version of my site.

Which CSS code should I use for both video and images to be make it look perfectly smooth?

Also right now I'm addressing all videos in the code, but how can I address specifically the video in section two ?

code I used:

.sqs-block-video {
padding: 0 !important; 
width: 110%!important; 
margin-left:-4vw!important; 
margin-right:-4vw!important; 
margin-top:0!important;
}

.page-section:nth-child(2) .content-wrapper {
padding-top:0!important;
}

@media screen and (max-width: 640px){
.sqs-block-video {
padding: 0px !important; 
z-index:99!important; 
width: 110%!important; 
margin-left:-5%; 
margin-top:-5%!important; }
}

Hope you guys can help 🤞

Edited by karo
added my url + code

Share this post


Link to post

Recommended Posts

  • 0

Link to your page please.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Can you share access password?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
1 hour ago, tuanphan said:

Can you share access password?

I have set it public, so you should have access now 🙂

Edited by karo

Share this post


Link to post
  • 0
20 hours ago, karo said:

I have set it public, so you should have access now 🙂

I see fullwidth video here. Did you solve?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
6 hours ago, tuanphan said:

I see fullwidth video here. Did you solve?

I inject already some code, but when I check it on mobile, I see there is some spacing on the right... could you check how come? Are those values ok with the site margins? 

Then also, I would like to set the image stacks on section 3 on full width and don't know how to do it. 

Share this post


Link to post
  • 0

 

On 7/15/2020 at 10:26 AM, tuanphan said:

I see fullwidth video here. Did you solve?

I guess it works on the desktop version but not on the mobile version, I have on the right side too much spacing (so if I scroll down the screen wiggles because the width of the site is larger) I attached a screenshot. Any idea how come? 

IMG_1409-2.png

Share this post


Link to post
  • 0

@tuanphan Actually it isn't working on desktop either, got spacing on the right and left too. I'm afraid the values aren't right. see screenshot

Screenshot 2020-07-16 22.50.36.png

Share this post


Link to post
  • 0

Remove all your code and replace with this:

[data-section-id="5e7b77b3ac7810366d3941a6"] .content-wrapper {
    padding: 0 !important;
    overflow: hidden;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
1 minute ago, rwp said:

Remove all your code and replace with this:


[data-section-id="5e7b77b3ac7810366d3941a6"] .content-wrapper {
    padding: 0 !important;
    overflow: hidden;
}

 

Thanks @rwp! Just tried it, I noticed on the biggest screen size I still have the margins left and right. 

Screenshot 2020-07-16 23.35.22.png

Share this post


Link to post
  • 0

You probably have a max width set somewhere, I will look.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
1 minute ago, rwp said:

You probably have a max width set somewhere, I will look.

indeed, 2400 px and 2vw margin

Share this post


Link to post
  • 0

Add this to the code block I sent.

max-width: unset;

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

I don't see the padding on my end, did you fix that?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
2 minutes ago, rwp said:

Add this to the code block I sent.


max-width: unset;

 

it works, yippii !

thanks!!

Share this post


Link to post
  • 0
2 minutes ago, rwp said:

I don't see the padding on my end, did you fix that?

Didn't fix it yet – still see the padding on mobile

Share this post


Link to post
  • 0
1 minute ago, karo said:

Didn't fix it yet – still see the padding on mobile

 

6 minutes ago, rwp said:

I don't see the padding on my end, did you fix that?

+ on mobile the text has no padding either on both sides, how could I add that only for the text? 1237512153_Screenshot2020-07-1623_50_20.thumb.png.62e762c34677315a9cc8b147e4bddfca.png

Share this post


Link to post
  • 0

This is the issue with the padding on top, did you add this css or is it from squarespace?

image.png.6cf3edfcb238ab6ac815a7c2d54cfa02.png


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Just now, rwp said:

This is the issue with the padding on top, did you add this css or is it from squarespace?

image.png.6cf3edfcb238ab6ac815a7c2d54cfa02.png

that's squarespace

Share this post


Link to post
  • 0
#block-yui_3_17_2_1_1586721122312_14081 {
    padding-top: 0 !important;
}

That will fix the top padding then, let me look at the sides of the text.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Do you have spacers on the sides of the text block?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Could you remove them and just make the text full width?

They are causing issues with the CSS.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...