Question for Slick812 - What's best tools and articles for responsive design?

weikelbob
weikelbob used Ask the Experts™
on
Hi,

Slick812 does an awesome job at helping me with responsive div designs.

I'd like to ask a question to him: What are good tools/articles to use to make my divs and calculate my percentages like you do?

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
you know you can always send slick a private message: https://www.experts-exchange.com/members/Slick812.html?messageMe

As for me, I use bootstrap to handle my responsive design: http://getbootstrap.com
OK,  to make responsive <div> and calculate width percentages, I use math to begin with, this is not any thing but seeing how many divisions you need to divide the "parts" of your outside Container, for the sections that are horizontally stacked inside it. for instance, if you have a main container, and you need three sections in a single row, The left section is the least width at 22% of total width, the center section is the widest at 49%, and the right section is 100-(22+49) as 29% wide. So it might code as -
<div style="max-width: 983px; border: 1px solid #c0c; margin: 0 auto;">
  <div style="display: inline-block; width: 22%;">left side</div><div 
  style="display: inline-block; width: 49%;">center big</div><div 
  style="display: inline-block; width: 29%;">right side</div>
</div>

Open in new window

BUT be warned, that the additions of borders, margins OR padding to the inner div (which is necessary most of the time) will disrupt the shown width settings, as the borders, margins and padding are NOT calculated by the browser display as ONLY inside the WIDTH setting, margins and borders, are determined OUTSIDE of the <div> width setting, and the padding changes the display calculation also. So the widths will NOT be correct with added margins and-or padding. There are ways to get the display to be shown correct percentage width, but That's not your question here.

Below shows same divs with inner divs that have the required margins, borders and padding
<div style="max-width: 983px; border: 1px solid #c0c; margin: 0 auto;">
  <div style="display: inline-block; width: 22%; vertical-align: top;">
    <div style="margin:3px; padding:6px; border: 2px solid #db0;">
    left side is More 2 see 
    </div>
  </div><div 
  style="display: inline-block; width: 49%; vertical-align: top;">
    <div style="margin:3px; padding:6px; border: 2px solid #db0; ">
    This is The CENTER<br />view here
    </div>
  </div><div 
  style="display: inline-block; width: 29%; vertical-align: top;">
    <div style="margin:3px; padding:6px; border: 2px solid #db0;">
    Right DIV of Display<br />view here
    </div>
  </div>
</div>

Open in new window




- - - - - - - - - - - - - - -

Now more to the question I helped you with, that had precise width for chopped sections of an Image that displayed as one image. In that case, you use the "base" or total width of the Image, say 1137px width of image before chopping smaller sections, You may need the left image piece as  523px wide, the image center section as  215px wide, and the left image section as 399px wide. To get correct width percentages , you divide the section width by image width, so the first image section is 523/1137 = 0.45998 , and made into a percent 45.998% - the second image section is 215/1137 = 0.18909 , and made into a percent 18.909% - the third image section is 399/1137 = 0.35092 , and made into a percent 35.092% .
So this precise image set-up display would look like this -
<div style="max-width: 1137px; margin: 0 auto;">
<img 
src="chopper1.jpg" style="width: 45.998%;" /><img 
  src="chopper2.jpg" style="width: 18.909%;" /><img 
  src="chopper3.jpg" style="width: 35.092%" />
</div>

Open in new window

without the <a> links you needed,
Your image division was more difficult, as you had two rows of "button" image sections on the right, But the same sort of percentage width calculation, could be used for that. BUT not all image and <div> width setups go smoothly , as there may be needed margins, or off-set positioning, or other element interference, with the width of all elements, so that requires a trial and error change (usually a lower percentage) until it elements stay in place at smaller res.

Many time for precise image divisions-sections, a page container is set up to the needed width of the page space, and the image sections are set as divs, when the page is arranged properly, and the image width is known for that page space, THEN the image is constructed from the known measurements of the required page space, and NOT make the page space to fit a fixed pre-made Image.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial