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

Hello, 

So when I first enter the landing page on mobile view, the page looks as expected. But when you zoom out on your phone, weirdly there is a huge margin on the right hand side. How can I remove this? 

Thanks in advanced. 

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?

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;
}
}

Amazing. This worked. Thank you very much Ziggy! 🙂

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: 

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.

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)
{ 

Any ideas why? 

Do you want me to open up a new case for this? 

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.

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;
  }}