- This topic has 7 replies, 2 voices, and was last updated 3 years, 11 months ago by Leo.
-
AuthorPosts
-
May 13, 2020 at 12:51 pm #1283119Matthias
Hi there,
i am wondering:
what is the best practive to achieve a full-width grid with generateblocks – with a centered image or text and the sides colored the same – as you can see on this page (but with the sides the same color as the image (so you cant see the transition?
Also the image should be aligned to the layout container – so menu and other pages have the same width. But unlike with post pages etc. the edges of the container should be colored up to full width.I tried 3-column grid in a container – image in the middle – 20-60-20 (percent), sides empty with coloured background. But this is not aligned to the menu/rest of page. Container size in customizer is 1200.
Any ideas how to solve this best?
May 13, 2020 at 4:30 pm #1283346LeoStaffCustomer SupportHi there,
Are you referring to the black section?
If so add a container block with outer container set to full and inner container set to contained.
Then add the image in the inner container.
If this doesn’t help, can you link me to the page in question so I can see your set up?
May 14, 2020 at 4:16 am #1283843MatthiasYes – to the black section in the first, orange in the second etc. -> the left and right side with image/text in center.
the way you describe it i get it aligned perfectly – i was thinking to complicated i guess with my 3-column grid. Simply select background colour for the whole container and left+right are that colour.
But – this made me face another problem. I needed a headline or similar on that.
I solved that with:
1.add container outer: full width, inner contained
2.add container inside that container: outer + inner full width
– set background image -> the image i want
– set spacing minimum height: my picture heigt.
– and after set the padding as wanted.Now i am facing a third problem: how to add text in different color / change text color in one headline/paragraph (on top of the background picture in the 2nd container)? (This would be a nice feature in gb (e.g. editors kit makes that possible))
The picture in my url as you can see has a text with 2 colours in it. i would like to add that with wordpress if possible.
My tries so far again is a grid on top of the 2nd container. but not sure if there is a more clever approach.
btw – did i see right that headline also works as paragraph? So it is also a replacement for that?
May 14, 2020 at 9:29 am #1284488LeoStaffCustomer SupportCan you link me to your current set up?
May 14, 2020 at 10:02 am #1284568Matthiasi edited the url in the first post.
There i want to achieve with gb what you can see on the main page (url without the sandbox in front).
May 14, 2020 at 2:25 pm #1284863LeoStaffCustomer SupportSorry is the original question about the full width container resolved?
If so can you mark this one as resolved, open a new topic for the new question so it’s easier for us to track the issue?
May 21, 2020 at 6:44 am #1295294Matthiasi just found a problem with this i couldnt solve:
the inner container (with the background image) doesn’t seem to resize for tablet and mobile.
It basicaly gets cut.May 21, 2020 at 9:15 am #1295644LeoStaffCustomer SupportCan you open a new topic for the new question?
Thanks!
-
AuthorPosts
- The topic ‘Full width gb – best practice’ is closed to new replies.