[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 1 year ago.

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


    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?.


    Tom Lead Developer

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



    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!



    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


    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.



    Tried this:

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


    @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.



    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.


    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



    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!.


    Tom Lead Developer

    Did you update to the GitHub branch of the plugin?



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


    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?



    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


    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.