[Resolved] Strange scrolling left and right (too much width)

Home Forums Support Strange scrolling left and right (too much width)

This topic contains 3 replies, has 2 voices, and was last updated by  Leo 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1179204

    Matthias

    Hey there!

    Finally all my desktop, tablet and mobile menu is ready now. But there is something strange going on, when I check my website on iPad and iPhone. The width is silly scrollable. There is something wrong with the width of the website. It must be an CSS issue, but not sure what it is.

    My current CSS custom code:

    /* Add pseudo fixed background */
    
    body {
        position: relative;
    
    }
    
    body:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-noretina-tinyfied.jpg');
        z-index: -1;
        background-repeat: no-repeat;
        background-position: top center;
    
    }
    
    /* swap psuedo fixed background image on 2x devices */
    
    @media only screen and (min--moz-device-pixel-ratio: 2),
    
    only screen and (-o-min-device-pixel-ratio: 2/1),
    
    only screen and (-webkit-min-device-pixel-ratio: 2),
    
    only screen and (min-device-pixel-ratio: 2) {
    
        body:before {
            background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-retina-tinyfied.jpg');
            background-size: cover;
        }
    
    }
    
    /* Other CSS */
    
    button.menu-toggle {
        font-size: 20px;
        /* 20px */
    }
    
    .envira-gallery-image {border-radius: 5px !important;}
    
    .slideout-navigation.main-navigation {
        display: flex;
        align-items: center;
    }
    
    #generate-slideout-menu .inside-navigation {
        padding-top: 0;
    }
    
    .main-navigation .main-nav ul li.menu-item-has-children>a {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;   
    }
    
    .main-navigation ul ul {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li:hover > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li:focus > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li.sfHover > a {
    		border-radius: 5px;
    }
    
    .envirabox-title {
    		text-align: center;
    }
    
    .album-art img {
    		border-radius: 5px;
    }
    
    #sonaar-player {
        left: 50% !important;
        transform: translate3d(-50%, 94px, 0) !important;
    }
    
    #sonaar-player.enable {
    		max-width: 1100px !important;
    		left: 50% !important;
    		transform: translate3d(-50%, 0, 0) !important;
    	
    }
    
    #sonaar-player .playerNowPlaying .album-art img.hover {
        display: none;
    }
    
    span.track-number {
    		display:none;
    }
    
    @media only screen and (min-width: 768px) {
    .main-navigation {
        z-index: 100;
        padding: 0;
        clear: both;
        display: block;
    }
    }
    
    .added_to_cart .wc-forward {
    		display: none;
    }
    
    a.added_to_cart.wc-forward {
    		display: none;
    }
    
    @media only screen and (max-width: 768px) {
    	a.cart-contents.shopping-cart {
    		color: #FFFFFF !important;
    			   background: #339900 !important;
    	   border-radius: 5px !important;
    }
    	
    	li.wc-menu-item.menu-item-align-right.has-items {
    	   
    }
    	
    	.main-navigation {
    		background: rgba(255,255,255,0.95);
    		padding: 10px;
    }
    	
    		.main-navigation.navigation-stick {
    		background: rgba(255,255,255,0.95);
    		padding: 10px;		
    }
    	
    }
    
    #mobile-header {
    		background: rgba(255,255,255,0.75);
    }
    
    @media only screen and (min-width: 769px) {
    		a.cart-contents.shopping-cart {
    		color:white !important;
    }
    	
    	li.wc-menu-item.menu-item-align-right.has-items {
      	background: #339900;
      	border-radius: 5px;
    }
    		
    	.main-navigation.navigation-stick {
    		background: rgba(255,255,255,0.95);
    		padding: 10px;		
    }
    	
    }
    
    .main-navigation img, .main-navigation.navigation-stick img {
    		height: 30px !important;
    		padding-left: 0px !important;
    		padding-right: 0px !important;
    		padding-top: 0px !important;
    		padding-bottom: 0px !important;
    }

    Any help would be very cool! Thank you, guys!

    #1179251

    Leo Customer Support

    Hi there,

    Can you temporarily disable all your CSS and see if the issue still exists?

    Does the issue happen in a page where only GP is used and no Elementor?

    Let me know 🙂

    #1180131

    Matthias

    Hey Leo,

    disabled step by step all custom CSS code, found and fixed the problem.

    Thanks! 🙂

    #1180144

    Leo Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.