- This topic has 6 replies, 3 voices, and was last updated 3 years, 8 months ago by David.
-
AuthorPosts
-
July 28, 2020 at 8:02 am #1379374Elisabeth
Hi there,
I’m loving Generate Blocks but am stuck on this one particular seemingly simple thing.
I have a container 1200 px wide in the main content area of a page. Inside that I want to put an h1 heading followed by three paragraphs of text, wrapping around an image. Below that I want to have an h2 heading followed by a few more paragraphs of text. I also would like to have (on mobile) the image to be centred, but when on desktop and tablet to have it right aligned.
So I’ve tried a ‘normal’ wp image block inside the container with alignment set ‘right’ and the h1 heading and the following paragraphs wrapped around. It won’t align centre on mobile as the out of the box WP image block doesn’t have that feature.
So I have also tried to create a GPBlocks grid, with a left and right column, inside the container and put the h1 and the three paragraphs on the left and the image in the right column of the grid. The beauty is that the grid settings allow me to align content differently for different screen sizes. The works on desktop, and I can centre the image in the grid cell any way I want for mobile and tablet… But on tablet the paragraphs of text hang down below the image and very much over to the left as you can’t wrap the text around the image (as it’s within the grid cell to the left of the image’s grid cell). With mobile it’s okay as it stacks the image after the text anyway. But in smaller desktop screens or tablet it’s a messy look.
Is the only solution maybe to stack the images/text differently? Or is there a way of wrapping the text around the image until the screen width gets to a particular size and then instruct it to stack instead?
Thank you!
July 28, 2020 at 2:45 pm #1379753TomLead DeveloperLead DeveloperHi there,
Your first try seems more simple – what if we could use CSS to center it instead of using an option?
Do you have an example of the layout you’re trying to build?
July 29, 2020 at 1:09 am #1380136ElisabethI’d be happy to do that with CSS now you mention it… seems like the simplest option…
July 29, 2020 at 1:58 am #1380192ElisabethI also realised I had another issue causing problems that had a knock on effect on this problem – I’d set the container width quite wide in the customizer to allow me to have a wide grid partway down some pages which I now no longer need due to project changes). I had therefore set the container block padding to be quite wide so the line length was reasonable for reading. Now that I don’t need the wide container at any stage I’ve reset the container width in the customizer and removed most of the padding from the block itself.
This means that other than the centering of the image itself whenever there is stacking the whole page works more coherently now.
I’ve got some CSS in the customizer already to make the image stack so do I just add some ‘centering css’ to this:
@media only screen and (max-width: 767px) {
.wp-block-image .alignleft,
.wp-block-image .alignright {
float: none;
}
}Thank you as always. Your patient help is very appreciated!
ElisabethJuly 29, 2020 at 7:09 am #1380507DavidStaffCustomer SupportHi there,
does this help?
.wp-block-image { text-align: center; }
July 29, 2020 at 7:30 am #1380531ElisabethYep- that’s nailed it. Thank you!
July 29, 2020 at 7:31 am #1380535DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.