- This topic has 13 replies, 4 voices, and was last updated 2 years, 5 months ago by
.
-
Posts
-
Hello,
I was hoping you could help me align the two headlines on my hero section to look like the example image here (and how to make it responsive):
https://www.awesomescreenshot.com/image/38740294?key=eca0cc5bf8920d25f6894c82085c45d2Currently, my headlines are not aligned as I want them to be, and I’m hoping you can provide some guidance on how to achieve the desired alignment.
Here is the dev. website: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Thank you very much for your help, I really appreciate it.
Customer Support
Hi there,
Have you tried adding some left padding to the first headline “beyond what is”?
https://docs.generateblocks.com/article/spacing-options-overview/#paddingHi Leo,
Thanks for your response, hope you’re having a good day!
I’ve added a 150px left padding, I thought that there is maybe another way to do it using a percentage?. Both headlines are in a container.
The paragraph text below “FG magazine is passionate about…” is displaying after a time laps when you refresh the page, is there anything that I missed in the settings?
Customer Support
Hi there,
in your hero you have Container Block ( Container A ) and in Inner Container block ( Container B ), which is good. Note A and B for future reference
But inside that is a Grid Block, which isn’t necessary.
If you:
1. remove the Grid Block
2. place your 2 headlines directly inside Container B.
3. remove the padding from the headlines.
4. Top headline set its Spacing > Margin Left –>auto
5. Bottom headline set its Spacing > Margin Right –>auto
6. Adjust the Container B > Sizing -> Max Width to suit your needs.Awesome David! Thank you.
The solution you provided works well for my headlines! Now, regarding the paragraph text and arrow in container C, should I remove the grid or just position it below container B?
Also, the paragraph text below “FG magazine is passionate about…” shows up with a delay when I refresh the page. Did I miss something in the settings or is there any animation?
The paragraph text has been assigned the Sentinel Medium font but that file is 404ing, you need to check the URL you have in your @font-face CSS.
Note: you may see the font load on your screen if you have the font on your PC/Mac. The delay of it appearing is the browser first trying to load the @font-face CSS and failing.If that paragraph and arrow are meant to stack on top of each other, then yes, remove the grid and leave them in their own Container ( C)
Thanks for the tip about the typography’s link. I’ll check what is happening.
As for the paragraph and arrow they are not meant to stack on top of each other but should look like this on desktop: https://www.awesomescreenshot.com/image/38776575?key=aaa8ca65224bc0b7f30fc00a153a875d
Customer Support
Hi Hichb,
To clarify, is the paragraph and the arrow already positioned as you would like on all views?
Hi,
Need to position the paragraph and arrow as in here for the desktop, and then make it responsive: https://www.awesomescreenshot.com/image/38776575?key=aaa8ca65224bc0b7f30fc00a153a875d
For tablets and phones they are meant to stack on top of each other.
To answer your question, there are not well positioned currently and require adjusting the padding and margin on top:
Here is the dev. website: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
They appear to be stacking properly from my end already. Only the spacing needs fixing.
You can set Tablet and Mobile-specific view settings by clicking on the icons above the Block Settings.
Hi Fernando,
Thanks for your response, is the layout structure used for these OK? Grid, Container, etc.
Your colleague David suggested another layout structure…Thanks!
Theres no issue using the grid method for that layout, and it makes perfect to do so. If it works then it is all good 🙂
All right, thanks a lot!
You’re welcome
- You must be logged in to reply to this topic.
