4 Replies Latest reply on Sep 7, 2013 2:28 PM by dreamweaver70

    Responsive Web Design:  Images, Texts, Widgets and other Elements

    dreamweaver70 Level 1

      I am trying to build my first website (resonsive), and experience this problem. I have a widget (image slider) on webpage (1232 max width) that looks great in 'desktop' mode at 50% wide (half the page in width), but when I shrink screen size to 'mobile' mode (480px) it shrinks to 50% size (image smooshed). When I put widget (image slider) in 'desktop' mode at 100% into my 50% fluid grid div it is too big, but when I shrink the screen to 'mobile mode' (480 px), it looks and works great. Great at 100% for mobile, but to big for desktop. I think I may have to attach a seperate CSS sheet or rule for the action, but not sure what/how to do. Hope this makes some kind of sense. Please help. Thank you in advance.

       

      How should I deal with responsive web design (and how it acts (mainly size,resizing) across mobile,tablet,and desktop) regarding:

       

      Backgrounds

      Images (inserted)

      Text (and headings)

      Width

      Fluid Grid Layout Divs

       


      PS: Any general rules, advice, links for how to best deal with images, texts, and other elements in responsive design.

       

      (I taught myself 'fixed' design, and am having trouble with percentages and elements like images (Should I use diff sizes for diff platforms?, How do they respond in responsive design), text (vector, so resizes???)