-
Hello, I want to modify my home page to include something like the screenshot.
What is the best way to build something like this to work on both mobile and desktop, which displays my latest posts. Would I need two separate containers for each (hiding on the different device types) or can this be achieved with one container? Would this require a grid layout?
If you could point me in the right direction, I’d be much appreciated.
I appreciate any help you can provide.
-
Hi there,
it would require a 2 column layout, with a Query Loop in each of those columns.
https://generateblocks.com/library/?pattern-category=query-loop&pattern-preview=4040
To give you an idea on how there is similar design in the GenerateBlocks Pattern Library, see here for the preview:
https://generateblocks.com/library/?pattern-category=query-loop&pattern-preview=4040
You can import that to a draft page, and look how thats built.
-
ok, i’ll take a look. thanks for your help!
-
You’re welcome, let us know how you get on.
-
Hi,
I gave it a go, but not going all that well. I’ve run into some problems.
1) Firstly, my links are underlined because of a global setting. Is it possible to put all links on this page, the home page to off?
2) On mobile the images are a bit scrunched up and not sure the best way to deal with this.
3) The second container’s post titles and tags, in mobile view, aren’t lined up with the larger featured post at the top.
4) The second container list view looks a bit strange on iPad. The example side has split this container into two further columns. Is this possible?
Thanks in advance!
-
Is there anywhere i can see this on the site?
-
Yes, it’s on the link I put in the private information. It’s on the homepage.
I’ve just cleared my site cache, hopefully that helps.
-
Ah ok, now i see it 🙂
1. Will you be making those into Container Links like the other posts ?
If not you can use some CSS to get rid of the text decoration:Select the parent container block ( that the grid is and query loops are inside ). Give it a class of:
has-no-underlineThen add this CSS:
.has-no-underline a { text-decoration: none; }2. The image squish is a pain with the Grid Block.
Select the Grid Block that has your 2 column grid ( content & meta / image )
And give it a CSS Class of:image-max-contentThen add this CSS;
.has-no-underline > .gb-grid-column:last-child { min-width: max-content; }3. Edit the left hand container block in that grid block, and in mobile preview set the Left Margin to
04. if you edit that Query Loop, and inside it select the Post Template block, in Tablet preview you can set its Width to 50%
-
Ah ok, now i see it 🙂
1. Will you be making those into Container Links like the other posts ?
If not you can use some CSS to get rid of the text decoration:Select the parent container block ( that the grid is and query loops are inside ). Give it a class of:
has-no-underlineThen add this CSS:
.has-no-underline a { text-decoration: none; }2. The image squish is a pain with the Grid Block.
Select the Grid Block that has your 2 column grid ( content & meta / image )
And give it a CSS Class of:image-max-contentThen add this CSS;
.image-max-content > .gb-grid-column:last-child { min-width: max-content; }3. Edit the left hand container block in that grid block, and in mobile preview set the Left Margin to
04. if you edit that Query Loop, and inside it select the Post Template block, in Tablet preview you can set its Width to 50%
-
So, all of the points worked apart from number 2. I’ve put in the code, but the images on mobile still appear squished. I’m not sure if I’ve put the CSS class in the correct grid block? I’ve attached a screenshot of where I put it.
-
Thats correct
Select the Image Block, and set its Object Fit to Cover -
After the new code, that works. Thanks for that!
Now how would I remove the bottom border of the last entry in that right hand column? Is this possible?
-
1. Edit the Query Loop in that column and select its grid block, give its. CSS Class of:
remove-last-border2, Then add this CSS:
.remove-last-border > .gb-query-loop-item:last-child > .gb-container { border-bottom: 0; } -
Thanks that worked great.
Going back to the images on mobile, they seem quite square, whereas my images are originally 1200x628px in a wide format. Is there a way to easily make this appear a bit wider? It’s fine if a bit of height is lost.
-
If you select the Image Block, and in Mobile view , set the Width to 150px that should fix that.
-
Oh, I did try that before in the editor, but I didn’t see it move. Only when I view the changes live did it make a difference.
Anyway, thank you!
- You must be logged in to reply to this topic.