How to change text & header elements...

User 2368890 Photo


Registered User
24 posts

I hope I can explain this clearly. In the mobile version of a website I'm working on, I want 1 column of text under an h1 element. I can add the header (h1) & text column. When I go to the desktop version, I want 3 columns: one main column that's the same as in the mobile version, a left sidebar, and right sidebar. I start with the mobile version in FF (450 px screen width), and get that set up with just the one column. When I go to the desktop version (1024 px screen width), and add the 2 sidebars, they add to the mobile version. But if I go to the mobile version and delete the sidebars, they disappear from the desktop version as well! Am I doing something wrong, or do I just not know how to do this???
User 2846109 Photo


Ambassador
341 posts

You can try setting up a new class for each of the columns you want to hide and then set the position-display-none for those items in the breakpoint you want. Here's a sample file I built.

Think of it as all three columns are always there but in the mobile version you are just hiding them.

Jeff
Attachments:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
341 posts

Not sure if that file was the correct one. Try this one...

Jeff
Attachments:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.