Archived topic
Issue with negative margins on mobile view
6 replies · Started by Mohammed on July 22, 2022
Hi,
thank you very much for your themes and blocks.
I'm having an issue trying to get a headline on mobile view on the next grid item with negative margin. It's not working.
Here's the original example i'm trying to replicate: https://elementor.com/library/template-kit/bread-bakery/preview/
You can see in the second section, on mobile the Welcome headline is on the next grid.
Here's my page with GB: https://wpanis.space/
Sorry, forget to past the license key. It's done.
Hi there,
The only easy way to do that would be to have an additional headline specifically for mobile:
1. Select the headline block containing the word "Welcome" and in Advanced > Additional CSS Class(es) add: hide-on-mobile
2. Add another Headline block with the word "Welcome" before the other headline, and give it Additional CSS Class(es): hide-on-desktop hide-on-tablet
Thanks,
i thought about that, i'v just wanted to see if it can be done with negative margin.
It would be tough with negative margins, as the vertical position will vary depending on the screen size, so it may look fine on one device but not so on another.
I don't get it, vertical position is not affected by the screen size?
On smaller screens text may not fit onto one line and will wrap to multiple lines. When that happens you would need to adjust the negative margin.
If you think you can do it then go for it, if you switch to Mobile Preview you can set negative margins specifically for that block.
