Jump to content

Horizontal scroll/off center on mobile

Go to solution Solved by tuanphan,

Recommended Posts

https://pug-violet-wsbr.squarespace.com/

Password is instruct

I'm having some issues with the mobile view on this site and I wanted to get some advice.

Depending on what device/testing area I use, the site either has a slight side to side scroll on mobile or the design is slightly off centre with the right side margin chopped off. Is there anything I can do to get it scaling neatly across mobile devices?

I also wanted to see if anyone can help with the top section on the homepage being very long. The section is set to large and fill screen and it looks great on desktop and the mobile view in editor e.g. section full height on viewport. But when I'm looking at it on an actual device the section is very long and you have to scroll. Eventually this will be a full height/full width background video and I need it to just fill the viewport on all devices.

Thanks!

Edited by eleanormargaret
Link to comment

Can you share your website URL?

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) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 1/22/2024 at 7:03 PM, eleanormargaret said:

Sorry, I thought it was in the topic heading!

https://pug-violet-wsbr.squarespace.com/
password instruct

You can fix by adding this line to Website Tools (under Not Linked) > Custom CSS

body, html {
    overflow-x: hidden;
}

 

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
7 hours ago, tuanphan said:

You can fix by adding this line to Website Tools (under Not Linked) > Custom CSS

body, html {
    overflow-x: hidden;
}

 

That code didn't seem to make much of a difference but I worked out which section was causing the issue and rebuilt it using slightly different fluid engine grid settings. That seems to have fixed it so whatever it was is sorted!

Do you have any thoughts on reducing the height of the first section on the homepage? It is set to large and fill screen and it looks great on desktop and the mobile view in editor e.g. section full height on viewport. But on an actual mobile it's really, really long. Is there a way for me to force this section to always be the full height of the viewport?

Link to comment
  • Solution
On 1/25/2024 at 10:29 PM, eleanormargaret said:

That code didn't seem to make much of a difference but I worked out which section was causing the issue and rebuilt it using slightly different fluid engine grid settings. That seems to have fixed it so whatever it was is sorted!

Do you have any thoughts on reducing the height of the first section on the homepage? It is set to large and fill screen and it looks great on desktop and the mobile view in editor e.g. section full height on viewport. But on an actual mobile it's really, really long. Is there a way for me to force this section to always be the full height of the viewport?

Use this code to Custom CSS

@media screen and (max-width:767px) {
.fe-65ae5354398a762c3345043f {
    grid-template-rows: repeat(2,minmax(24px, auto)) !important;
}

section[data-section-id="65ae5354398a762c33450440"] {
    min-height: unset !important;
    height: 60vh !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

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.