[Resolved] sections in mobile navigation

Home Forums Support [Resolved] sections in mobile navigation

Home Forums Support sections in mobile navigation

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1139994
    rafel jesus

    Hi guys.
    In the home of my website I work in section, in fact, 4 sections in every section I have two submenus in HTML, in desktop version all is OK, but in mobile version doesn’t work correctly I can’t see all de section with the two submenus.
    How I can do to resolve this issue?
    Thanks

    #1140193
    David
    Staff
    Customer Support

    Hi there,

    unfortunately this CSS doesn’t really work on mobile:

    .sticky-section {
        min-height: 950px; /* Adjust to suit the tallest section */
        position: sticky;
        position: -webkit-sticky;
        top: 90px; /* Adjust to the height of the navigation */
    }

    You can change it so it only applies to desktop devices like so:

    @media (min-width: 769px) {
        .sticky-section {
            min-height: 950px; /* Adjust to suit the tallest section */
            position: sticky;
            position: -webkit-sticky;
            top: 90px; /* Adjust to the height of the navigation */
        }
    }
    #1140430
    rafel jesus

    Hi David
    I did but didn’t work, I need to change some value px for example?
    Thanks

    #1140443
    David
    Staff
    Customer Support

    1. Remove this CSS:

    .sticky-section {
        min-height: 950px; /* Adjust to suit the tallest section */
        position: sticky;
        position: -webkit-sticky;
        top: 90px; /* Adjust to the height of the navigation */
    }

    2. Add this CSS:

    @media (min-width: 769px) {
        .sticky-section {
            min-height: 950px; /* Adjust to suit the tallest section */
            position: sticky;
            position: -webkit-sticky;
            top: 90px; /* Adjust to the height of the navigation */
        }
    }
    #1140462
    rafel jesus

    Hi David.
    I did and didn’t work, look at the video.

    the second section after REALITAT VIRTUAL I can’t see Més Informació (more information) in the third section too, I can’t see LEGAL WEB Més Informació (more information) but in the fourth section I can see two parts XARXES SOCIAL and GOOGLE ADS
    Stay in touch.
    Thanks

    #1140479
    David
    Staff
    Customer Support

    Can you DISABLE your Cache Plugin. Then make sure the CSS is updated. Then view the site in a Private/Incognito browser.

    #1140492
    rafel jesus

    Hi David.
    I do all the steps and nothing doesn’t matter I forget the sections and work in blocks.
    In block Can I do to eliminate the spaces between blocks?

    THANKS

    #1140769
    David
    Staff
    Customer Support

    Can you share a link to the page where I can see the problem?

    #1140917
    rafel jesus

    Hi David
    http://www.ccfoto.cat for mobile navigation.
    The other now is a draft when I finish I will send it

    Thanks

    #1141338
    David
    Staff
    Customer Support

    For the mobile scrolling problem.
    Can you remove all of the CSS related to the Sticky Sections – so they scroll normally.

    Then add this CSS:

    @media (min-width: 769px) {
        .sticky-section {
            min-height: 950px; /* Adjust to suit the tallest section */
            position: sticky;
            position: -webkit-sticky;
            top: 90px; /* Adjust to the height of the navigation */
        }
    }
    #1141621
    rafel jesus

    Hi David
    This is all code there’re in ccs style.

    /*
     Theme Name:   GeneratePress Child
     Theme URI:    https://generatepress.com
     Description:  Default GeneratePress child theme
     Author:       Tom Usborne
     Author URI:   https://tomusborne.com
     Template:     generatepress
     Version:      0.1
    */
    @media (min-width: 769px) {
        .sticky-section {
            min-height: 950px; /* Adjust to suit the tallest section */
            position: sticky;
            position: -webkit-sticky;
            top: 90px; /* Adjust to the height of the navigation */
        }
    }
    css
    .content-box-yellowGreen,
    .content-box-powderblue,
    .content-box-mediumAquamarine,
    .content-box-gold,
    .content-box-khaki,
    .content-box-lightGreen,
    .content-box-moccasin,
    .content-box-yellow 
    {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
    }
    
    .content-box-yellowGreen {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-powderblue {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-mediumAquamarine {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-gold {
    background-color: #FFFAFA;
    border: 1px solid #000000;
    }
    
    .content-box-khaki {
    background-color:#FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-lightGreen {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-moccasin {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-yellow {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    
    .content-box-blue {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    }
    .block-container {
        display: flex;
    }
    
    .block-container a {
        width: 33%;
    }
    
    	a[class|="caixa-1"]{
    		position:static;
    		display:flex;
    		
    	}
    
    	a[class|="caixa-2"]{
    		position:static;
    		display:flex;
    		text-decoration:none;
    		
    	}
    
    	a[class|="caixa-3"]
    {
    		position:static;
    		display:flex;
    		text-decoration:none;
    		
    	}
    img {
      display: inline-block;
    }
    
    #1142065
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It doesn’t seem to be updating, then. Here’s what I’m seeing right now: https://www.screencast.com/t/iO7JFausZ

    You can see it’s missing the @media part.

    Is there any other sort of caching going on? Maybe server caching?

    Also, the css text below it is invalid, you should remove that or all of the CSS below it won’t work.

    #1142209
    rafel jesus

    Hi Tom
    How is it posible?
    I have that in my style css
    https://www.screencast.com/t/g9OQJyZX
    Thanks

    #1142212
    rafel jesus

    Hi there
    Will, it’s my new ccs style?
    https://www.screencast.com/t/O1K6lNAKFW
    Thanks

    #1142407
    David
    Staff
    Customer Support

    It looks like your CDN is not updating the cached files. Can you disable the CDN for now?

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.