-
Hi GP/GB Team,
I hope you’re all doing well. This is my first time posting here 😊
I’ve made several changes to my website, mostly visual updates, but I’ve run into some issues with responsiveness, particularly on tablet and mobile displays.
I have a two (similar) questions, I allow myself to ask them to you in this same topic. :1. Do you know why my blocks aren’t appearing correctly on mobile devices? The text seems to either extend beyond the container or not respect its boundaries at all. Additionally, some blocks and buttons appear to overlap despite the spacing I’ve applied between them. (Please refer to the screenshots provided).
– https://imgur.com/a/a0TEO5t
– https://imgur.com/65JZsxA
– https://imgur.com/kCdVDr9In summary, is there a way to make the text adapt to different screen sizes with CSS? I know there is documentation helping on this, but I’m having trouble applying these changes despite several attempts and I struggle to identify what’s the problem…
2. How can I adjust the margin of these two banners ? (Please see the screenshots provided). I’ve tried aligning it to “full,” but it doesn’t seem to change.
– https://imgur.com/0WtgYp5
– https://imgur.com/ZZUKPsI / https://imgur.com/RRlSATn (90% zoom VS 100%: is there a way for this to adapt to the page zoom?)I understand that CSS codes and settings can resolve these issues, but I’ve had difficulty implementing them. I’ve consulted the GeneratePress documentation, which has helped with some issues, but not the ones I’m currently facing.
To help diagnose the problem, here is all the CSS applied to the site (I’ll admit, it’s been a lot of testand learn😂). For information, I have GeneratePress Premium but not yet the premium version of Generate Blocks (which I plan to take).Lastly, I’ve noticed that some of my changes aren’t displaying. This could be because I’m working on a staging/test site, but even after clearing my cache and logging back in, some elements (images, typography…) of older versions of my homepage persist.
All images of this topic here : https://imgur.com/a/a0TEO5t
Thank you so much in advance to anyone who can help me solve these issues. Your assistance would be greatly appreciated! I’ve only been using GeneratePress and its environment for a few months now, and I’m aware of its potential, but I still have much to learn 😂
Best regards from Paris,
Nabil
-
Hi Nabil,
Welcome to the forum 🙂
Let’s deal with 1 question at a time.
For question 1, this kind of issue is likely caused by a fixed height or width set to the block, for example, if you set a container height to 200px, it works on desktop, but when on mobile the screen gets smaller, text wraps to more lines, the content exceeds the 200px limit set to the container, so an overflow issue occurs.
Same goes to the fixed width as well.
Can you link us to the page in question so I can see the section in question to determine what the cause is?
-
Hi Ying,
Thank you for your prompt reply ! As I already said, I work on a test site so you have to be logged in to view the page… I sent you login information privately so you can take a look. I can also send you the HTML code of the page if necessary?
I removed all the height and width values in the mobile version and it works better, but I still encounter problems with touching and texts that are much too long on mobile. I clearly understand the concept of a content that exceeds a limit and displaying a overflow but it seems like I can nothing about it…
I’ve also sent you the HTML code of the page.
Thank you,
Nabil
-
I understand that you are trying to achieve a full-width layout, and you are using align full and align wide options for the container blocks.
Those alignment options are from WP, not from GB, so it does not work very well and it sometimes causes overflow issues.
I see the overflow issue on both your desktop and mobile.
I would recommend to do this:
1. Set the content container of the page to be full width. You can do so via the layout metabox in the page editor, or via a layout element if you want to apply full width to multiple pages.
2. Disable the alignment option for the containers, just set them to default, they will be full width by default.
3. As you are already using GenerateBlocks, use the query loop block instead of WP post block to display the posts. It gives you much better layout/style control.
Let me know if that helps!
-
I’m so sorry, I forgot to confirm the solution !
Thank you so much !
-
No worries, glad to hear that 🙂
- You must be logged in to reply to this topic.