-
I’m struggling with “Block Alignment”.
In the block editor, it seems that the alignment settings have to be the same for Desktop and Mobile. That is, setting the block alignment to “Default” under Desktop, then switching to Mobile and setting it to “Full” will also change the settings on Desktop to “Full”. It is as if the block alignment cannot be different between Desktop and Mobile, is that true?
Why do I want to do this? The inner container is to have all text displayed on the left side so as not to overlay an image on the right side. The inner container width size is set to 40%. This works great on Desktop mode when Block Alignment is set to Default. The problem is that on mobile the text does not quite fit; adding right padding doesn’t seem to help.
If I set the Block Alignment to “Full”, then it looks great on mobile but on Desktop the text is now the entire width of the display, overlaying the image on the right side.
I’m not sure if the answer is with Block Alignment, or perhaps another setting? I just need to fit the text in the viewport on mobile mode, and have the text on the left side of the display in Desktop mode. The mobile device I am testing is a Pixel 7.
No surprise is that is shown in the editor is not the same as what renders the browser. Not exactly wysiwyg.
The page URL is added in the private information area.
-
It is as if the block alignment cannot be different between Desktop and Mobile, is that true?
This is true. The alignment options are not from GB, but from WP, and it’s not a responsive setting.
Can you point me to the section in question so I can suggest the best option?
-
The section in question is the header. Right now, if you look at it in Desktop mode it looks fine. If you look at the same page on a mobile phone, the far right hand of the text is falling off the screen.
I’ve played around with padding and screen width but cannot get it to fit in mobile.
The block alignment is set to Default. For some reason, the other sections (containers) are displaying just fine.
-
Hi there,
Can you provide temporary login credentials for me to do a quick check on the layout settings on the backend?
-
I can, yes. Please give me your email and I’ll set it up. List it in the private area if you like.
Sorry for the delay. I had to copy the site to a staging area in order to do this.
Jon
-
The section in question is the header.
Do you mean the page hero section? If so, select the 1st container, and set
displaytoflex.By the way, your page is overflowing on mobile due to the slider in the Case Study section, the GB container is being set to 480px, when mobile screen is smaller than 480px, the page overflows.
Make sure you set
max-widthto100%for the parent container of the slider in this case. -
Thank you, Ying! I wish I understood the reasons for Display Flex better. I made the changes and it works fine again, though I have some work to do on the slider section at the bottom.
[Though Alvind didn’t need the staging area, setting it up wasn’t a total waste of time. It gives me the opportunity to evaluate another hosting service 🙂 ]
-
You are welcome 🙂
Setting up a staging site will become handy if there are any issues in the future!
- You must be logged in to reply to this topic.