Archived topic
Need Help with Author Box
8 replies · Started by Marius on July 9, 2021
Hello,
I have made a Author Box with Block Element according to Leos Videos. So f ar it has worked, but if I smaller the Browser Window, it looks ugly. The Image gets bigger and all the title and text gets under the image, so that there is lots of empty space beneath the image.
How can I make this better looking?
Hi Sonja,
Do you have an idea what layout would you like it to be on a smaller screen?
We can't help with design, but if you can share a mockup, we would be happy to help.
Of course there should not be a this big empty space in the right side.
For one from many examples for a author box look at
https://demo.mhthemes.com/magazine/hendrerit-in-vulputate-velit-esse-molestie-consequat/
or
https://total.wpexplorer.com/base/dont-just-stand-there-do-something/
So the text should stay on the right, and on mobile breakpoint the image should be in the middle and the text also should be centered.
I have put the image in the middle, that worked. But how can I put the text on mobile view in the middle?
Hi there,
Select the parent Container Block of your Author Box, then switch to the Mobile view and change its Text Alignment:
https://www.screencast.com/t/5ttBgdqz7a
As long as you have not specified an alignment on the individual blocks inside that container they will inherit the containers alignment
Aha, yes, that works. Thank you David.
But anyway it looks a bit strange, that the image get so fast on top in the middle if I make the browser smaller. Because there is so much space left and right.
You can set the container width for each device as well:
https://docs.generateblocks.com/article/container-overview/#container-width-1
Hmm, if i switch to mobile, I can not see the settings for container width. Only on desktop.
But also I did not understand, what this setting does.
Make sure you are selecting the container then the setting should definitely be there:
https://www.screencast.com/t/7fXnVzcPg6c
It allows you to set the container width inside the grid in responsive views.
The desktop view is currently using 15/85 splits. You can set it to be the same on mobile if you wish.