[Resolved] Replicating Menu Design & other issues

Home Forums Support [Resolved] Replicating Menu Design & other issues

Home Forums Support Replicating Menu Design & other issues

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #424315
    Andy

    Thanks, that works but the image becomes stretched in the viewport range 860-1106px.

    Looks like I may have to leave it at 100% width for tablet, although that means on landscape tablet the image will be rather wide.

    At first glance I thought the design was going to be relatively easy to recreate but it’s proving to be alot more difficult than I first thought.

    Maybe I need to consider using Elementor for this?.

    #424443
    Tom
    Lead Developer
    Lead Developer

    You absolutely could. Or just look at how they do it and duplicate it on your own.

    #424496
    Andy

    Went back to a background-image and now it’s displaying on all viewport sizes! It seems it needed that CSS you gave me for the static image:

    #services .inside-grid-column {
        height: 100%;
    }

    Although I had already tried adding 100% height to the column itself, it only worked when applied to the child container.

    Thanks Tom!

    #424499
    Andy

    Just noticed at exactly 1025px it doesnt display due to no height, but a pixel either side of this and it displays fine, so weird. :s

    #424638
    Tom
    Lead Developer
    Lead Developer

    It’s the same issue – the parent element doesn’t have a height at that width. Background images can be a pain to work with like this – they depend on the inner content of the div.

    #424835
    Andy

    Tried this:

    @media (min-width: 1025px) and (max-width: 1025px) { 
    	#services .lgc-tablet-grid-100 { height: 516px; clear: none; }
    
    }

    and

    @media (min-width: 1025px) and (max-width: 1026px) { 
    	#services .lgc-tablet-grid-100 { height: 516px; clear: none; }
    
    }

    But it just doesn’t get applied at all.

    #424902
    Andy

    Also, I’m trying to re-order the columns on mobile/tablet for the row with the title ‘UNDER THE BONNET:…’ It’s working fine at below 860px but above that its all messed up.

    #425521
    Tom
    Lead Developer
    Lead Developer

    Try adding this:

    @media (width: 1025px) {
        .lgc-tablet-grid-100 {
            clear: none;
        }
    }

    As for the issue, try the latest LGC version on GitHub: https://github.com/tomusborne/lightweight-grid-columns

    #425760
    Andy

    The CSS I was using to fix the 1025px issue wasn’t working because of a missing closing bracket, so thats sorted now.

    I thought I’d also fixed all the push/pull issues but not quite. At the viewport range 860px-1024px the ‘UNDER THE BONNET:…’ columns are being switched, it should be text column on the left, photo column on the right, but at the above viewport range its displaying as photo column on left, text column on right.

    Any help appreciated!.

    #426446
    Tom
    Lead Developer
    Lead Developer

    Did you update to the GitHub branch of the plugin?

    #426708
    Andy

    Yeh not sure if I downloaded the right files, but I just pressed the download button on the github page and installed that zip.

    #427239
    Tom
    Lead Developer
    Lead Developer

    Your URL has expired so I can’t check it out anymore.

    A guess wouold be the tablet-push-x and tablet-pull-x classes?

    #427390
    Andy

    I’ve added a new preview URL now. You were right I needed to change tablet-push-100 to tablet-pull-50 and vice-versa for the other column because of my custom CSS forcing it to 50% width the tablet-push/pull-100 classes weren’t taking effect.
    Also had to add .tablet-push-50, .tablet-pull-50 { left: 0; } to my max-width 859px media query.

    It took a while to get there but with your help we made it! lol. And now I know it’s possible to create a layout like this without needing a page builder. ๐Ÿ™‚

    Just hope the migration to Gutenberg next year doesn’t mess it all up :s

    #427611
    Tom
    Lead Developer
    Lead Developer

    Hopefully Gutenberg makes it all much easier without the need for shortcodes.. We’ll see ๐Ÿ™‚

Viewing 14 posts - 16 through 29 (of 29 total)
  • You must be logged in to reply to this topic.