Empty space in landscape mode

Hi there,

The section contains only text, which looks fine in portrait mode, but in landscape mode creates a huge empty space at the end of the section. There is no editing option in landscape mode, so I assume there must be code to reduce it. Thanks!

https://flower-ferret-x494.squarespace.com

pass: 151515

2 hours ago, Tiko said:

The section contains only text, which looks fine in portrait mode, but in landscape mode creates a huge empty space at the end of the section. There is no editing option in landscape mode, so I assume there must be code to reduce it. Thanks!

 

Hey there! 

Assuming you are using the latest version of Squarespace 7.1 with fluid engine, you should be able to adjust the height and padding of each section. I've attached screenshots for context.
 

Click "Edit Section" then go down to adjust the height. You can customize the "Gap" spacing as well and play with "Row Counts".

Also double check that the bounding box of your content is adjusted appropriately so that you can use the section height sections.

You will need to make these adjustments in both Desktop and Mobile view editors

Let me know if this helps!

19 hours ago, BartelsCreativeCo said:

Hey there! 

Assuming you are using the latest version of Squarespace 7.1 with fluid engine, you should be able to adjust the height and padding of each section. I've attached screenshots for context.
 

Click "Edit Section" then go down to adjust the height. You can customize the "Gap" spacing as well and play with "Row Counts".

Also double check that the bounding box of your content is adjusted appropriately so that you can use the section height sections.

You will need to make these adjustments in both Desktop and Mobile view editors

Let me know if this helps!

Hi,

Thanks for the ideas but it didn't solve the problem. I use squarespace 7.1 but exactly for this section it doesn't show the alignment and height options. There are no extra rows in portrait mode and it looks good. The problem appears in landscape mode.

3 hours ago, Tiko said:

Hi,

Thanks for the ideas but it didn't solve the problem. I use squarespace 7.1 but exactly for this section it doesn't show the alignment and height options. There are no extra rows in portrait mode and it looks good. The problem appears in landscape mode.

Interesting that there doesn't appear to be the section height controls when you open the editor. When I view your site, and inspect in BOTH Desktop and Mobile view, there is a large margin between the social media icons and the rest of the footer. So, the margin issue in my user experience appears in both views—I've attached some screen shots showing the fluid grid cells that appear between your social block and the footer. 

If you're not seeing key editing features as pictured in my screenshots from the previous post, you should reach out to Squarespace's support team to see if there is a bug.
 

Otherwise, if you want to have a quick fix try injecting this into your custom CSS editor. You can play around with the Height property to fit your liking.

/*targets the section that is too tall*/ 
.fe-657f99a1fb33212489601806 {
  height: 100px !important; /*adjust pixel value to your liking*/
}

Let me know if this helps!

19 hours ago, BartelsCreativeCo said:

Interesting that there doesn't appear to be the section height controls when you open the editor. When I view your site, and inspect in BOTH Desktop and Mobile view, there is a large margin between the social media icons and the rest of the footer. So, the margin issue in my user experience appears in both views—I've attached some screen shots showing the fluid grid cells that appear between your social block and the footer. 

If you're not seeing key editing features as pictured in my screenshots from the previous post, you should reach out to Squarespace's support team to see if there is a bug.
 

Otherwise, if you want to have a quick fix try injecting this into your custom CSS editor. You can play around with the Height property to fit your liking.

/*targets the section that is too tall*/ 
.fe-657f99a1fb33212489601806 {
  height: 100px !important; /*adjust pixel value to your liking*/
}

Let me know if this helps!

Hi, 

Thanks for checking it. You are talking about the homepage and there i have that space just because later i am going to fill it with information. That's done in purpose.

But the problem i have is on the page "about". The CSS code sadly still didn't fix it.

On 1/6/2024 at 5:29 PM, Tiko said:

Hi, 

Thanks for checking it. You are talking about the homepage and there i have that space just because later i am going to fill it with information. That's done in purpose.

But the problem i have is on the page "about". The CSS code sadly still didn't fix it.

Thanks for the clarification. I personally don't see the issues you're describing on the About Page.

Here is a screen shot of my desktop view in Chrome browser. If anything the text is too close to the footer and could use a little extra space, imo. 

Here is what it looks like when previewing on the iPhone 12 viewer via Chrome's inspection tool. Again, I do not see the spacial issues.

Have you previewed in your actual browser as I am? Perhaps it's only occurring in the editor and the spacing is fine in context.

All that said, if you're not seeing key editing features such as section height adjustments, you should reach out to Squarespace's support team to see if there is a bug and they'll inspect your site. 

On 1/9/2024 at 7:55 AM, BartelsCreativeCo said:

Thanks for the clarification. I personally don't see the issues you're describing on the About Page.

Here is a screen shot of my desktop view in Chrome browser. If anything the text is too close to the footer and could use a little extra space, imo. 

 

Here is what it looks like when previewing on the iPhone 12 viewer via Chrome's inspection tool. Again, I do not see the spacial issues.

 

Have you previewed in your actual browser as I am? Perhaps it's only occurring in the editor and the spacing is fine in context.

All that said, if you're not seeing key editing features such as section height adjustments, you should reach out to Squarespace's support team to see if there is a bug and they'll inspect your site. 

 

Hi,

This happens not on every device but quite some of them (in landscape mode). Here is an example. 

The height options were not there because i noticed "Feel the screen" was turned off. But turning it on and and changing height and other options still didn't solve the problem.

23 hours ago, BartelsCreativeCo said:

Ok I understand your dilemma now.

You need to write a media query for this to adjust the margin for the specific screen width range. Since it looks fine on desktop and mobile, but incorrect on Surface Duo I'd suggest trying this in your custom CSS

@media only screen and (min-width: 380px) and (max-width: 767px) {

.fe-659205ad15f7844d8dbb253b {
    grid-template-rows: repeat(18 ,minmax(24px, auto)) !important;
}
}

This should lower height.

Please let me know if it works.

 

This solved the problem. Thanks a lot!

Could you explain in two words what the numbers in the code mean so that i could adjust them if needed in other situations?

1 hour ago, Tiko said:

This solved the problem. Thanks a lot!

 

Could you explain in two words what the numbers in the code mean so that i could adjust them if needed in other situations?

Glad that worked!

.fe-659205ad15f7844d8dbb253b is the class for this particular section. "fe" stands for fluid engine. You'll need to be able to use the browser inspector to find this for each section you're applying code to. 

grid-template-rows: repeat(18 ,minmax(24px, auto))
I believe the "18" determines the minimum number of cell rows in a section, while the 24px determines the minimum width of each cell. 

You shouldn't need to adjust the minmax(24px, auto) numbers, just the number of rows. I'd just play around with the row count at that media query breakpoint to determine what looks best for you in each situation.