Streaming live at 10am (PST)

How to make my non-responsive site responsive


#1

I am having trouble converting my site to a responsive site. Whenever I change something in mobile view it affects it in the web view. Is there a way to update how a page looks in mobile view only without affecting the web page view? Especially on my case study pages: http://paulgay.io/donorsee



Here is my public share link: LINK
(how to access public share link)


#2

I might be missing something here but can you not just place the text below the images in the same column/div? That way they will stack Image - text - image - text - image text.

You should always try to keep your changes in mobile to a minimum and work the design to stack accordingly in mobile when resized. It keeps follow up work clean and minimal too.

Also an additional tip, you should do your best to limit the width of the content as it spreads far too wide (the text).


#3

Thank you! I realized I had them in different columns and that was causing issues! And could you explain further what you mean by limiting width of content or provide tips?

Thank you!


#4

While it’s not a rule set in stone. Wide blocks of texts can just feel weird on the eyes, this will not be a problem on lower resolution laptops but on larger displays of 1920 wide+ you will feel it. Try to limit the full width of content to say 1366 and work your way down.

See example and scroll down: http://content-limit.webflow.io/


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.