- This topic has 6 replies, 3 voices, and was last updated 1 week, 6 days ago by David.
October 13, 2021 at 10:22 pm #1962846Sandee
I would like to use an image that contains a shape on the bottom in my home hero area, and I can’t figure out the best way to do it. When I try with margins and padding, it makes things so off on the mobile views that I can’t fix them right. I don’t know if I need to do this in a different way — I need to get use a round image with a shape on the bottom of the container or section, and I need to be able to center some text on one side of the container.
I hope my question makes sense.
Thank you!October 13, 2021 at 10:48 pm #1962850ElvinStaffCustomer Support
I’m not sure I understand how you want it to be laid out.
Can you provide a mockup image of how you want things to appear?
Perhaps you’re trying to make it look like this? https://share.getcloudapp.com/v1ujvY2E
Let us know.
A wise man once said:
"Have you cleared your cache?"October 13, 2021 at 11:02 pm #1962858Sandee
I do have a page mockup; my apologies. I know I didn’t explain it very well. I have added a link to the page mockup in Private Information.
Thank you!October 14, 2021 at 3:20 am #1963047DavidStaffCustomer Support
nice design – but i can see that would be complicated to handle the responsive behaviour. First question is are you using GenerateBlocks Pro ? As that has more Advanced Backgrounds and the an Asset Library for uploading your own shapes.October 14, 2021 at 3:28 am #1963057Sandee
Thank you. Yes, I’m using GB Pro and GP Premium. I thought it might be complex, but I wasn’t quite sure.October 14, 2021 at 4:36 am #1963106Sandee
I’ve tried something else that seems to work okay on desktop with the exception of the bottom portion of the top container image. Can you think of a setting that might work for it?October 14, 2021 at 4:59 am #1963119DavidStaffCustomer Support
Its definitely a tricky one.
With the current layout you have ie. the background is a full image, you can use the Advanced Background option in GB:
This will allow you to add a different background image, and set different size, positioning for the 3 device sizes.
An alternative method to help with responsive controls would be to break the layout down into layers.
1. Save a PNG image file of just the round image ( no blue background ). Then you can add that as a Background Image to the Container, and set its Background Color to Blue.
2. Use a custom Shape on the bottom of the Container Block, in GB Pro you can add your own shapes to the Asset Library:
3. You can still keep the current Grid Block for positioning your text to the side.
This way you can resize and re-position the Round Image using Advanced Backgrounds, and not have to worry about the Blue background causing issues.
- You must be logged in to reply to this topic.