September 5, 2019 at 4:17 pm #493421
Is there a way to modify/add CSS to cause a widget area to stay in one position on the page in mobile but still be otherwise responsive?
Specifically on this page, https://jennykanevsky.com/, the "copywriting with vision" widget text is in the right position on desktop but moves down on mobile.
I tried "position: absolute;" but the way I added it didn't do anything.
Thank you!September 5, 2019 at 6:08 pm #493423
The best way to achieve that would be add the words to the image itself. With all the different mobile devices, it will be hard to keep the text in the right position. The text looks a bit small on my end on laptop. But you'd have a much better user experience if you created the words in the image.
Love coffee, chocolate and my Bella!September 5, 2019 at 6:13 pm #493424
So of course, in that case, the text size won't adjust.
I think she'll have to decide which option she prefers, either a non moving text or adjustable text but not in the exact position she wants.
Thanks for the help!September 5, 2019 at 6:30 pm #493426
Yeah, it's kinda hard especially when people are looking for the best viewing experience. I always try to look at the Google Analytics of a clients' site to see where their traffic is coming from. If the majority of the traffic is coming from smaller to medium sized devices, then I'd say code it for "their best viewing experience".
Love coffee, chocolate and my Bella!September 5, 2019 at 6:31 pm #493427
And clients need to understand that while they "want the site to look and work the way they want it".... their site is for the audience/visitors to be able to use. Many don't put themselves in the position of an end-user.
Love coffee, chocolate and my Bella!September 9, 2019 at 8:47 am #493471
Someone on the Genesis Facebook group suggested I may be able to use containers to get the widget at a specific point on the page. It's over a Front Page background image. Do you know if this is possible and if so, how it would be done?September 9, 2019 at 9:08 am #493472
The home page is not driven by blocks, but by widgets. So the containers are a mute point for this. You need CSS for the widget. If the home page was built with blocks then what they suggested in Facebook would have been an option.
Love coffee, chocolate and my Bella!September 9, 2019 at 9:21 am #493473
Thank you! I haven't done any new sites since the Gutenberg update so I am out of touch with the blocks. I am still getting used to them on edits!
Thanks so much for the help!September 9, 2019 at 9:30 am #493474
The only thing I can see maybe doing that's not a lot of work would be to create another widget area below the home image that only shows up on mobile. You could "hide" the text widget over top of the image on smaller devices and let that hidden widget show up. It would be hidden on desktop. You can do with Widget Options but you need to create the new widget area.
Love coffee, chocolate and my Bella!
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.