Extra Space on Website on Mobile

  • Resolved nikakuz3

    (@nikakuz3)


    5 years, 9 months ago

    Hi,
    When I open my website on a phone and zoom out a little there is all this extra space on the right side of the website. Sometimes it even loads like that initially when the page is first opened. There is never a problem on the computer it is just the mobile view.
    Thanks!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • In this stylesheet, there are rules in two media queries which scale the mobile menu to a size that is wider than the screen width, so that’s pushing the boundary out to the right:
    https://nikakuz.com/wp-content/uploads/2019/06/csshero-static-style-avant-child.css?ver=10.2.4.1558546446

    For the media query starting at line 30 for max-width: 568px, at line 62, is this rule:

    .header-menu-button {
  transform: scale(1.66) translate(5px, 5px);
}

    And the media query at line 69 for max-width: 320px, at line 76, is this rule:

    .header-menu-button {
  transform: scale(1.12) translate(10px, 5px);
}

    Try setting the scale in both to 1.

    There are some other unusual things going on with that menu button as well at other screen widths.

    Thread Starter nikakuz3

    (@nikakuz3)

    Thank you! I think it’s fixed!

    Yeah, looks much better. If you need to make the menu lettering look bigger, then it’s better to just add a font-size property to those rules instead of scaling. Please mark this topic as Resolved so others will know it’s fixed.

    Thread Starter nikakuz3

    (@nikakuz3)

    Thanks I really appreciate it!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Extra Space on Website on Mobile’ is closed to new replies.