13 Replies Latest reply: Dec 2, 2014 4:38 PM by fonts in captivate8 RSS

    Problems with Responsive Web Design

    fonts in captivate8 Community Member

      Not really sure how to ask this, but here we go. I am new to responsive web design; always worked with html coding and tables like in Front Page. I have the concept down of sections, then containers, then columns if needed to place my content and images. Several times in my process, I get a page done or nearly done, and then later on, my text or images re-arrange themselves and overlap themselves. In other words, the text layers itself on top of another text. The two images below were laid out perfectly just a little while ago.

       

      The max width of all containers on the page is 940px. It works great, until it doesn't I have not changed any margins or anything to make this “overlapping” of objects occur. I get satisfied with a page, and all the sudden, magically it screws up. What am I missing here? If I highlight the container, it shows a margin on the left of 342px, and a margin on the right of 343px. Looking at the CSS Designer however, these numbers do not show up. Only the 940px. I am not changing the CSS either prior to this event happening. This occurs whether in IE or Chrome.


      In this first image, the red breadcrumbs started out being parallel with the search feature, and should be in the gray area. The gray menu text, was in the white area above the gray bar when it looked right. Both sets of items (i.e., red breadcrumb and search feature are set in two columns. Each column with is 50%.

      overlapmenu.png


      In this next image, the items in the black bar were side, by side. Now they are not, and I did nothing to them or the stylesheet. The mail image column is 8.333%, the join text is in a column that is 25%, and the join us form is in a column that is 66.666%.


      overlapmail.png

      Hope this helps you help me!  Very frustrated.