Problems with image display in first sections 7.1

@JustinSeimits

I don't know if there is a solution.

In general the CSS can be put in the Advanced > Page Header Code Injection for a page or in Design > Custom CSS. Of course the CSS needs to be adjusted a bit depending on where is is going.

I prefer to put CSS that is page specific in Advanced > Page Header Code Injection for a page. Again it really is all about personal preferences. Some folks prefer to keep all their CSS in Design > Custom CSS.

Per your issue. Please post the URL for the page on your site where you want to achieve the effect mentioned.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

25 minutes ago, creedon said:

@JustinSeimits

I don't know if there is a solution.

In general the CSS can put in the Advanced > Page Header Code Injection for a page or in Design > Custom CSS. Of course the CSS needs to be adjusted a bit depending on where is is going.

I prefer to put CSS that is page specific in Advanced > Page Header Code Injection for a page. Again it really is all about personal preferences. Some folks prefer to keep all their CSS in Design > Custom CSS.

Per your issue. Please post the URL for the page on your site where you want to achieve the effect mentioned.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

DM Sent

DM received.

I have an idea for a solution. It will involve some Javascript. If I don't post a solution in several days please bump this thread.

@JustinSeimits

Add the following to Settings > Advanced > Code Injection > HEADER. The poster doesn't need to do this step as they already have jQuery installed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      begin reposition first page section background so header doesn't hide it
      
      Version       : 0.2d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      // increase section height the same amount the image is moved down
      
      const increaseSectionHeight = false;
      
      // do not change anything below, there be the borg here
      
      $( window )
      
        .resize ( function ( ) {
        
          const h = $( '#header' ).height ( );
          
          const $firstPageSection =
          
            $( ':not( #footer-sections ) > .page-section:first' );
            
          if ( ! $firstPageSection.length ) return; // bail if no first section
          
          const selector = '.section-background img, ' +
          
            '.section-background .sqs-video-background';
          
          const $e = $( selector, $firstPageSection );
          
          $e.css ( 'top', h + 'px' );
          
          // bail if no section height increase
          
          if ( ! increaseSectionHeight ) return;
          
          let minHeight = 0;
          
          switch ( true ) {
          
            case $firstPageSection.hasClass ( 'section-height--medium' ) :
            
              minHeight = 66;
              
              break;
              
            case $firstPageSection.hasClass ( 'section-height--small' ) :
            
              minHeight = 33;
              
              break;
              
            default :
            
              minHeight = 100;
              
            }
            
          if ( minHeight )
          
            $firstPageSection.css ( 'min-height', 'calc( ' + minHeight +
            
              'vh + ' + h + 'px )' );
              
          } )
          
        .resize ( );
        
      // end reposition first page section background so header doesn't hide it
      
    } );
    
  </script>

Let us know how it goes.

On 6/5/2021 at 12:11 PM, creedon said:

@JustinSeimits

Add the following to Settings > Advanced > Code Injection > HEADER. The poster doesn't need to do this step as they already have jQuery installed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      begin move main content down so header doesn't hide it
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      do not change anything below, there be the borg here
      
      */
      
      $( window ).resize ( function ( ) {
      
        const h = $( '#header' ).height ( );
        
        $( '#page' ).offset ( { top : h } );
        
        } );
        
      // end move main content down so header doesn't hide it
      
    } );
    
  </script>

Let us know how it goes.

Yes, that worked perfectly!!!!! 

Thank you, how can I provide you with compensation?

I just noticed that with this above code it is messing with the footer on the page the code is on so it fixes the video error but moves the footer up so you cant read the content. 

Would love to get some help on figuring out what is happening, mahalo

Here is the site url: https://cardioid-orange-k9ls.squarespace.com/

Pw: aloha 

@JustinSeimits

Password doesn't work.

I got it figured out it was some weird sqs thing that the site was wonky for 2 -3 hours

@JustinSeimits

I'm in! Taking a look now.

@JustinSeimits

I have updated my Jun 5th code post.

Whew! Hopefully that works better.

This is for the more technically inclined. My first attempt was a little ham fisted. So I went after the .background-section class element. At first blush it seemed to be as easy as setting the top property to move the top down. Just like my first attempt eh? I then discovered that SS is doing dynamic calculations on the first page section background section. So my top setting was getting blown away! 😞 

Im not seeing that code making it work. 

Am I doing something wrong I took the code you wrote and put it on the homepage code injection? 

You didn't do anything wrong. Give me a few.

ok, thank you very much for your help with this. Its really a sqs thing that they need to fix with the transparent header toggle on and off.

Updated code post again.

Let me know how it goes.

I'd like to say at this point that, that video is spectacular! The whole thing is grand! I'm glad the area was saved from a tourist golf course! I especially like the short bit at the end with the weathered wood all piled together. Just something about it! 😀

Works perfectly, thank you very much. 

Yeah it is a cool video, great company that is helping protect Hawaii! 

 

This is using me nuts too. No option to just have a history photo at the header without including a segment underneath, which then messes the peak up.

@JustinSeimits

See my solution above (and pasted below):

After the header, insert a gallery block instead of an image or headline block. Just put one image in the gallery, and hide the arrows. The gallery block starts right below the header, unlike the image and headline blocks, which slip underneath the header. (You can see the "missing" part of your image or headline block by setting the header to transparent.)

On 6/24/2021 at 11:04 AM, foo said:

@JustinSeimits

See my solution above (and pasted below):

After the header, insert a gallery block instead of an image or headline block. Just put one image in the gallery, and hide the arrows. The gallery block starts right below the header, unlike the image and headline blocks, which slip underneath the header. (You can see the "missing" part of your image or headline block by setting the header to transparent.)

@fooGreat solution, I would assume it works for videos as well as images?

@JustinSeimits

Gallery blocks are not supported on v7.1.

18 hours ago, creedon said:

@JustinSeimits

Gallery blocks are not supported on v7.1.

@creedon I have a plugin that allows them to work on 7.1 its a great plugin, highly recommend it

On 6/24/2021 at 2:04 PM, foo said:

@JustinSeimits

See my solution above (and pasted below):

After the header, insert a gallery block instead of an image or headline block. Just put one image in the gallery, and hide the arrows. The gallery block starts right below the header, unlike the image and headline blocks, which slip underneath the header. (You can see the "missing" part of your image or headline block by setting the header to transparent.)

This worked perfectly and I found that by using the gallery with grid strips, it looks exactly the same on mobile where before it was zooming in and cutting off most of the sides of the image.

On 6/11/2020 at 11:05 PM, thaitandem said:

In case it may be of use to others, here is what I, a novice, is now doing to remedy the problem—gaining the full height of the image below the Header, with no extra space between the Header and Image Section below. It’s a modification of Zara’s approach with some modified CSS @tuanphan offered from another thread.  

 

1) Place a new Image Section between the Header and current Image Section. (I’ve tried with a Blank Section, but did not achieve consistent results—for some reason the Image Section worked every time.)

2) Set Section Height to minimum-10.

3) Delete the default background image. 

4) Set background color of the new Image Section to match the background of the Header — or use CSS as indicated below. 

5) Delete the spacer that may show up in the center of the section. 

6) Obtain this new Section’s section-id and its empty Text block-id. 

7) Inject the following CSS into the page’s advanced settings, incorporating the appropriate section and block ids from step 7 above. 

 

<style>
[data-section-id=“XXXXX"] {
    min-height: 1vh !important;
}

[data-section-id=“XXXXX"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: /*your color*/ !important; /*optional to match Header background if not set in step 5 above*/
}

#block-XXXXX {
  padding: 0px !important;
  font-size: 1px !important;
}
  </style>

 

Thank you for this! I find I have to add one last line to the block selector section to move the text block up. This hides the section completely for me, where as with the code as-is above a bit of it is life:

#block-[Text Block ID in the section to be hidden]  {
  padding: 0px !important;
  font-size: 1px !important;
  margin-top:-100px;
}

On 5/23/2021 at 11:04 AM, foo said:

Use a gallery block instead of an image or headline block. Just put one image in the gallery, and hide the arrows. The gallery block starts right below the header, unlike the image and headline blocks, which slip underneath the header. (You can see the "missing" part of your image or headline block by setting the header to transparent.)

Thanks that worked really well.