Mobile Responsiveness/Spacing Issues

[dev1]

I had a previous thread created, but I think it might have gotten closed because I wasn’t able to reply for 12 days. I am posting the picture of the most recent post from staff and I am going to link the old post thread.

I attempted to do what this staff member said, but it didn’t fix my issue. I set the section ID to section-1-mobile and used the CSS provided. Any help would be great.

https://theme.co/apex/forum/t/mobile-not-working-viewport-tags/23004 - Old post

[nabeel]

Hi there,

Thanks for writing around! I checked your page again and all of your styling is applied through a cache plugin (autoptimize) please make sure to clear the cache first and disable it so it does not conflict with the responsive styling. In the mean time add the following code to make things better in a mobile view:

@media screen and (max-width: 979px) {
    .entry-wrap .x-container.max.width {
        width: 100% !important;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-top: 0 !important;
    }
    .x-anchor-button {
        font-size: 20px !important;
        margin-left: 0 !important;
    }
}

Let us know how this goes!

[dev1]

That worked perfectly for almost all the views thank you!

The only views that it doesn’t work for is the iPad (768px x 1024px), iPad Pro (1024px x 1366), and Laptop (1024px x 887px).

Pictures Below:
Laptop

iPad

iPad Pro

This is my current code:

@media screen and (max-width: 979px) {
    .entry-wrap .x-container.max.width {
        width: 100% !important;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-top: 0 !important;
    }
    .x-anchor-button {
        font-size: 20px !important;
        margin-left: 0 !important;
      	text-align: center !important;
    }
  .el9.x-anchor.x-anchor-button
  {
    	margin-left: 9% !important;
  }
  
  .x-text {
  		font-size: 14px;
  }
  .h-custom-headline.cs-ta-center.h6 {
    	font-size: 12px;
  }
}

/* Desktop and Laptops */
@media only screen and (min-width : 1025px){
  .x-main.left {
  margin-left: 12%;
}
  .post-342 {
  width: 110%;
}
  .el9.x-anchor.x-anchor-button {
    text-align: center;
  }
  
  .el5.x-anchor.x-anchor-button {
    text-align: center;
  }
}

Any help?

[rad]

Hi there,

Could you try adding this as well

@media (max-width: 980px) {
    .entry-wrap .x-container.max.width {
        width: 100% !important;
        max-width: 100% !important;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-top: 0 !important;
    }
    .x-anchor-button {
        font-size: 25px !important;
        margin-left: 0 !important;
      	text-align: center !important;
    }
  .el9.x-anchor.x-anchor-button
  {
    	margin-left: 9% !important;
  }
  
  .x-text {
  		font-size: 14px;
  }
  .h-custom-headline.cs-ta-center.h6 {
    	font-size: 12px;
  }
}

Thanks!