- This topic has 28 replies, 2 voices, and was last updated 6 years, 4 months ago by Tom.
-
AuthorPosts
-
November 14, 2017 at 11:41 am #424315Andy
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?.
November 14, 2017 at 3:12 pm #424443TomLead DeveloperLead DeveloperYou absolutely could. Or just look at how they do it and duplicate it on your own.
November 14, 2017 at 4:43 pm #424496AndyWent 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!
November 14, 2017 at 4:53 pm #424499AndyJust 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
November 14, 2017 at 10:41 pm #424638TomLead DeveloperLead DeveloperIt’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.
November 15, 2017 at 4:56 am #424835AndyTried 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.
November 15, 2017 at 6:25 am #424902AndyAlso, 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.
November 15, 2017 at 6:06 pm #425521TomLead DeveloperLead DeveloperTry 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
November 16, 2017 at 3:20 am #425760AndyThe 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!.
November 16, 2017 at 9:49 pm #426446TomLead DeveloperLead DeveloperDid you update to the GitHub branch of the plugin?
November 17, 2017 at 5:36 am #426708AndyYeh not sure if I downloaded the right files, but I just pressed the download button on the github page and installed that zip.
November 17, 2017 at 9:23 pm #427239TomLead DeveloperLead DeveloperYour URL has expired so I can’t check it out anymore.
A guess wouold be the tablet-push-x and tablet-pull-x classes?
November 18, 2017 at 5:30 am #427390AndyI’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
November 18, 2017 at 9:52 am #427611TomLead DeveloperLead DeveloperHopefully Gutenberg makes it all much easier without the need for shortcodes.. We’ll see ๐
-
AuthorPosts
- You must be logged in to reply to this topic.