Streaming live at 10am (PST)

How best to move object below main Div on smaller screens?

Any thoughts on how to implement this responsive layout?


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.

Read-only link: https://preview.webflow.com/preview/sharrock-pitman-legal?utm_source=sharrock-pitman-legal&preview=4184d685b836b66d30602479cff3fdcd
Published WIP: https://sharrock-pitman-legal.webflow.io/

Thanks!

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:

  1. The paragraph that is inside the hero image only visible on desktop-view
  2. The paragraph that is outside the hero image only visible starting at tablet view.

Video to help you: https://www.loom.com/share/1fdcac74e0a54c68a680cdf544e9bd73

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.

https://jeanthedesigner.webflow.io/webflow-services

Thanks Jean!

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.

I made one fix with a white, 100% width div behind the blue text:
https://sharrock-pitman-legal.webflow.io/about-2/legal-team

And one fix where the background image is set to a shorter height on tablet/phone:
https://sharrock-pitman-legal.webflow.io/legal-solutions/business-law

But neither of these seem ideal, they could “break” quite easily (e.g. if the header text is longer on another page).

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.