Intro paragraph should appear inside banner image on Desktop, and then appear below the banner for Tablet/Phone browsers.
I know this could be achieved nicely in Grid, but I’m already pretty far down the road with a Flexbox based structure for the site, not too keen on redoing all in Grid. And I’d prefer not to use Javascript or any negative margin hacks. Just want a simple, elegant way to handle it.
Well, if you’re not really going after the most used solutions as using negative margin or stuff like that, I would recommend you duplicating the paragraph and placing it on the 2 different places you want it to be, giving it combo classes and making:
The paragraph that is inside the hero image only visible on desktop-view
The paragraph that is outside the hero image only visible starting at tablet view.
If you need more specific help with this project or any other project you might have, feel free to contact me through this page and I will be glad to help you.
I guess my hesitation with that approach is it’s more difficult for client to update the text in future. Easy for them to mistakenly only update one instance of the text.
Ok. I figured out a way to work around the possibility of the user only changing one text. Two lines of code that are going to copy the text used in desktop and paste across every breakpoint
var text = document.getElementById("textInDesktop").textContent;
document.getElementById("textForMobile").textContent = text;
Just place this script code before the /body tag and make sure to give proper ids for the text elements.
