Jump to content

Large margin on the right hand side when you zoom out on mobile view

Go to solution Solved by Ziggy,

Recommended Posts

Hi @Cloovercam, it looks like you have a fixed button at the bottom of the screen, was this done with code? I suspect from the screenshots that is what is causing the margin.

Can you share your website URL? and any code you've used?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hey Ziggy - Thanks for your response. 

Page url is - https://www.cloover.se/

I have used a lot of custom code for mobile.  See below all mobile custom CSS... 

@media only screen and (max-width:640px)
{#header {
height: 120px;
  }}


//Split screen for peace of mind customer page
@media only screen and (max-width:640px)
{  
[data-section-id="63578ed02a2a3d7110b0b46d"] {
    .content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 30px !important;
  padding-top: 0px !important;
  padding-left: 40px !important;
}

overflow-x: hidden !important;
overflow-y: hidden !important;
}
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 30px !important;
  }}

@media screen and (max-width:640px) {
div#block-694c566c4d2fdb4918aa, * {
   text-align: center !important;
  }}

@media screen and (max-width:640px) {
div#block-368ff4cd7a8fecc983cb * {
   text-align: left !important;
  }}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1664986793424_16733 * {
   text-align: left !important;
  }}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1664986793424_18547 * {
   text-align: left !important;
  }}


//Split screen for phone adding bottom padding
@media only screen and (max-width:640px)
{  
[data-section-id="6357d750bd5978258f113127"] {
    .content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 30px !important;
  padding-top: 0px !important;
}

overflow-x: hidden !important;
overflow-y: hidden !important;
}
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 30px !important;
  }}

//Customer page icons and text
@media only screen and (max-width:640px) {#block-yui_3_17_2_1_1666777763453_45647.sqs-block-image{width:20%; margin:auto}}

@media only screen and (max-width:640px) {#block-yui_3_17_2_1_1666777763453_16372,#block-bc2a6e28b19e4931987b,#block-6896107573187cb4308a,#block-906e0af465acdd95da3e,#block-fe5812a00338db51e931,#block-675fd4f96ba37fa822cf,#block-beef421953c9aaa870f6.sqs-block-image{width:20%; margin:auto}}

@media only screen and (max-width:640px) {#block-yui_3_17_2_1_1666777763453_7745.sqs-block-image{width:18%; margin:auto}}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1666777763453_10477,#block-yui_3_17_2_1_1666777763453_19361,#block-yui_3_17_2_1_1666777763453_39181,#block-78bea7e5dc5acbf58a6c,#block-a8ce527e166de90913df,#block-2e7b1e22ff7e85728240 * {
   text-align: center !important;
  }}

//---------------------------


@media only screen and (max-width:640px){#block-yui_3_17_2_1_1666795389761_17719.sqs-block-image{
  width:95%; 
  margin:auto}}

@media only screen and (max-width:640px){#block-yui_3_17_2_1_1666700891852_65939.sqs-block-image{
  width:100%; 
  margin:auto}}

@media only screen and (max-width:640px)
{#block-8db4dc13e91503dc872d * {
   text-align: center !important;
  }}

@media only screen and (max-width:640px)
{ div#block-8db4dc13e91503dc872d * {
   text-align: center !important;
  }}

@media only screen and (max-width:640px){#block-yui_3_17_2_1_1666084805724_4391,#block-yui_3_17_2_1_1666110357951_35288,#block-yui_3_17_2_1_1666110357951_46346,#block-yui_3_17_2_1_1666110357951_55532,#block-yui_3_17_2_1_1666110357951_75621.sqs-block-image{width:30%; margin:auto}}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1666099091629_48787,#block-yui_3_17_2_1_1666099091629_58950,#block-yui_3_17_2_1_1666170719789_394812,#block-yui_3_17_2_1_1666110357951_11111,#block-yui_3_17_2_1_1666110357951_14137,#block-yui_3_17_2_1_1666110357951_8392,#block-yui_3_17_2_1_1666110357951_9701,#block-yui_3_17_2_1_1666099091629_48787 * {
   text-align: center !important;
  }}

@media only screen and (max-width:640px) { #block-ab31c49508469f56b788,#block-3961b637882c33546e09.sqs-block-image {width:97%; margin:auto}}

@media only screen and (max-width:640px){.sqs-block-image{width:50%; margin:auto}}

@media screen and (max-width:640px) {
div#block-0acdfdeb80e3cfe845aa * {
   text-align: center !important;
  }}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1665147872449_230752 * {
   text-align: center !important;
  }}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1665147872449_270267 * {
   text-align: center !important;
  }}

@media screen and (max-width:640px) {   
  .header-title-logo img {     
    max-height: 80px; 
  }
}

@media screen and (max-width:640px) {
.header-title-logo {
    width: 400px;
    padding-left: 0 !important;
}
}

Link to comment
  • Solution

I've found the issue, right at the bottom of your CSS:

@media screen and (max-width:640px) {
.header-title-logo {
    width: 400px;
    padding-left: 0 !important;
}

You have the logo set to be 400px wide, so when the screen gets smaller than ~530px it starts extending off the screen, remove that width property and you should be fine!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hey Ziggy. It seems, that by doing that (or maybe this is a separate issue) that some blocks (ones where I have added custom CSS as a split section) are too far over to the right with no padding. I have tried adding padding but it doesn't seem to help... Some screenshots below: 

image.thumb.png.70dec711d5d53a3652f7ace9c284f7df.pngimage.thumb.png.4b4cac7aa74408de1279c90d4dc55f60.png

 

Link to comment

It's a separate issue that was there before, the code I suggested you remove only affected the header logo.

I would try adding a margin-right, this should work:

.sqs-block-image .design-layout-collage:not(.sqs-narrow-width).image-position-left .image-card {
    margin-right: 5%;
}

But you probably want to place the margin-right in the code targeting the sections more specifically than I have.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
4 hours ago, Cloovercam said:

For some reason that changes the margin on the desktop, but has no effect on mobile view. Even if I add @media only screen and (max-width:640px)

I'm not sure why that would be happening, but you have a lot of CSS and it's always possible that there is a conflict that would have the effect of the opposite happening. It's never easy to debug someone else's code when you're not always aware of the intention behind every line of code.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hey Ziggy! 

Just wanted to update this thread that a solution (albeit not sure if its a buggy workaround...). I have added 

I added a margin to the right of both blocks which seems to have worked: 

@media screen and (max-width:640px) {
div#block-8db4dc13e91503dc872d * p {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 10px;
  margin-left: 0px;
  }}

image.png

image.png

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.