[Resolved] Replicating Menu Design & other issues

Home Forums Support Replicating Menu Design & other issues

This topic contains 28 replies, has 2 voices, and was last updated by  Tom 10 months ago.

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

    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

    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

    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

    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

    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

    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.