-
Posts
-
Hi Enfold team!
I have a grid row with background images placed in them so that I can overlay my text and button. It looks great on desktop but on mobile the background is not vertically centering behind the text, and the text is pushed all the way to the top while the background image is bottom centered. I’ve included some screenshot links in the Private Content so you can see what I’m referring to there!
The only thing I can think of is adding Whitespace and hiding that content for large screens, and while it does get that background and content closer together it still adds a lot of padding around the elements on mobile.
Any workarounds/insights would be appreciated!
Thank you in advance.
Hi Victoria,
I disabled Autoptimize and cleared my server cache, checked Enfold settings for any other settings as well but the issue still remains.
I’ve added access information to the private data in case you need to take a look!
Hi kellyCraftMedia,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { #av-layout-grid-1 .av-special-heading.av-special-heading-h2 { padding-top: 200px; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
That had no effect, unfortunately, and I tried both Quick CSS and adding to custom.css file.
Any other avenues to pursue?
Thanks!
That worked in Quick CSS – only problem is now there’s just a LOT of space in between those sections. Essentially did the same thing I was thinking of doing by adding padding/whitespace, but doesn’t exactly solve the problem.
I am not sure if it applies but I do have a minimum height for that grid row set to 550px.
Perhaps there’s another Layout Element I can consider using instead of the Grid Layout? Although I do want that full width effect rather than the container effect. What about having two different versions – one grid row that I have set for desktop, one for mobile? I see there are pre-existing options to show/hide on Mobile, but if I were to recreate a Grid Element that only shows for desktop, would there be a way to do that on a custom element sort of way?
Thanks!
If I use a different element for mobile, how do I hide the other element for desktop? Again, I only see one built in option to hide elements on mobile. What do I do to hide an element on desktop?
- You must be logged in to reply to this topic.