-
Hi,
I tried to align the icon with the text (headings) in the mobile view in a specific way. Like in the screenshot:
https://postimg.cc/ZBS2ZsYHIn the example it works like I want it to, but on another site with the same settings, it looks like this:
https://postimg.cc/CBh7m3L3How can I control this?
-
Hi there,
I checked your site and it looks like the icons are set toAlign items: center, which is why they appear in the middle on mobile.To fix this, edit the container and the GB text block → in the right sidebar go to Layout → Alignment and set it to start. (Screenshot)
This will align the icon and text properly, matching your example.
-
Thank you for your reply.
If I change to Alignment -> Start, it doesn’t change it in the post from the first screenshot, but in the second one it does change.
I found out that the plugin Table of Contents Plus is causing the error. In the post from the second screenshot, I use a table of contents that I created myself with anchor links. If I disable the ToC Plus in the post (first screenshot), then it behave normal.But in general, is it possible to make the alignment like in the first screenshot? The icon aligns with the first line of text (through Alignment -> center), and the text in the second line starts below the icon. I can’t do the same in post from the second screenshot.
Is that somehow possible? -
Hi there,
You’ll need to adjust the alignment specifically for mobile view. Switch to the mobile preview in the editor, then edit the container and the GB text block → in the right sidebar, go to Layout → Alignment and set it to start there. (Screenshot)
That way it only applies on mobile and will match the look from your first screenshot.
-
I put this block with Icon in the post (Link to 2. Screenshot:) and changed the settings as you said but the alignment is still not like in the first screenshot.
I want this:
https://postimg.cc/dk3xv5hZlook like this:
https://postimg.cc/ZBS2ZsYHSorry if there was some confusing explanation from my side.
-
Hi there,
Could you please share a screenshot of your block setup in the editor (List View open) so we can see the structure? That will help us check why the alignment isn’t matching.
If it’s easier, you can also make a short screen recording and upload it to Imgur, then share the link here. That way, we can spot what’s different and guide you with the exact fix.
If possible, please also provide temporary admin access in the private info box so we can check it directly. To keep this safe, you can use the plugin Temporary Login Without Password to create a secure link.
This will let us review the setup more closely and guide you with the exact fix.
-
Here the screenshot of the setup:
https://postimg.cc/ppd1gDGnA video is in the prive information box.
-
Hi there,
Do you have access to the site in screenshot 1?
When I inspect the heading, it looks like the shape and text are wrapped inside a
<span>tag, which isn’t something you can normally do directly from the block editor settings: https://cln.sh/X1FNx3Y42ynkbf2LsFpgThat’s the reason the text aligns under the icon. If you can replicate the same setup on your other site, you can just follow that structure.
-
Yes, I have access to this site.
It appears that the plugin Table of Contents Plus is causing the error. When I deactivate it, the heading is in its usual structure. On the github site of the plugin they mention something about span tags:Now creates new span tags for the target rather than the id of the heading.
https://github.com/wp-plugins/table-of-contents-plus
Anyway, I think I needed to change the ToC plugin because it hasn’t gotten any updates for a year.Maybe you can add this style function for the icon text/heading block; it seems to look nice in some circumstances. 🙂
Thank you for your help!
-
No problem, glad to hear that 🙂
- You must be logged in to reply to this topic.