Solved

Basic responsive layout problems

Posted on 2016-08-25
19
65 Views
Last Modified: 2016-09-01
I am new to responsive design and I am having two issues with the page below.

http://embroideredpatches.net/test/color_chart.html

1) In the " Most Popular / Frequently Used Thread Colors" section, once you scale the window size down to a certain point, the color swatch images completely disappear. It seems as though the size of the images is progressively scaling down.

2) In the "Complete Thread Color Chart" section there is a rather large gap between the charts and the text in the right side column.

I sense these questions will be a piece of cake for someone very well-versed in responsive markup.
Thanks a lot!
0
Comment
Question by:underrugswept
  • 10
  • 7
  • 2
19 Comments
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41770424
On your first point if you are going to be doing responsive design - stay away from tables for layout. Tables should not be used for layout anyway but especially not in a RD layout. Rather use col-sm-4 to get your 3 columns and then style your colours in there.

The reason your images are "dissappearing" is as you suspected - there is a style in reset.css that is setting the image to have a max width of 100% - as its container shrinks so does the image. You can fudge a work around by removing the indicated line from reset.css but that is not recommended - rather change your markup to be RD friendly using the grid layout.
img {
  max-width: 100%; /* <=== This one */
  vertical-align: top;
}

Open in new window


To your second question - again you are using tables for layout - not a good idea - in this case rather use the col-sm-3 style on a div as this will give you a much better responsive layout.

First step - remove the tables - if you get stuck post back and we can look at how far you have got.
0
 
LVL 7

Expert Comment

by:James Bilous
ID: 41770431
1) Your image tags have the following style applied to them by reset.css:

img {
   vertical-align: top;
   max-width:100%
}

Open in new window


The max width will cause them to be as wide as the parent container, which is also sized using a max width. As you scale the page, everything shrinks to accomodate the new page size. You should apply a min-width to the swatch images so they do not shring to oblivion.

2) The content in the left column is not quite big enough width-wise to fill the column with class .col-lg-10. I would normally recommend setting a width on the td's so they fill out proportionally rather than just taking up as much room as they need, but you are using a td for the swatch colors as well. I would move those tds with the colors into divs inside the td's of the names, then give each td a "col-md-3" class so they are a fixed width and fill out the parent container appropriately.
1
 
LVL 1

Author Comment

by:underrugswept
ID: 41770486
Julian,
Converting the tables to divs worked beautifully for the Most Popular / Frequently Used Thread Colors, but no so much for the full color chart because I was using "td bg color=" for the swatches. Is the only solution to this making an image color swatch for ALL of those colors?

I did something like this (repeated over and over), but it was quite awful.
<div class="col-lg-1 padding5" style="background-color:#F7F9CD;"></div>
<div class="col-lg-3 col-md-3 col-s-3 col-xs-6 padding5">Cream</div>

Open in new window

0
 
LVL 1

Author Comment

by:underrugswept
ID: 41770497
This method also puts all the colors in a really weird order as it readjusts, rather than keeping everything grouped by color so specific colors are easier to locate. I suspect there's no way around that?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41770556
You can keep the grouping by putting them in their own row groups
<div class="row">
   group of 4 / 8 / 12 / 16 col-sm-3 items here
</div>
<div class="row">
   group of 4 / 8 / 12 / 16 col-sm-3 items here
</div>

Open in new window

As the display width narrows the colours will collapse under each other in their groups.

As for the swatches I would do something like this
<div class="colour-swatch" style="background: #XXXXXX"> </div>
If you want them square then you have two options
1. some javascript to keep the height adjusted based on width - attached to screen resize
2. put a transparent png in the box
<div class="colour-swatch" style="background: #XXXXXX"> 
  <img src="images/genericswatch.png" />
</div>

Open in new window

In the above solution you style the image to be width: 100% so it fills the container - because it is transparent the background colour will show throw. Also, because it is shared by all swatches you only need to download it once - so minimal impact on page load.
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41775186
I didn't abandon this; I'm just struggling and need more time. No matter what I do, I can't get the rows to break up properly.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41775424
Explain the effect you want to acheive
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41778073
I hope I can explain this is a way that makes sense.

Here's the color chart coded with divs instead of tables: http://embroideredpatches.net/test/experiment.html
Similar colors are grouped together, but when you make the window smaller, they get rearranged into random orders.

Here's an experiment I did that grouped them in a way I was planning to do using rows like you said:
http://embroideredpatches.net/test/experiment3.html
This is done with tables, but it was just so I could visualize the best way to break them up.

Here is my attempt at actually breaking them up that way:
http://embroideredpatches.net/test/experiment2.html
I only did the first row in case it didn't work, which it didn't. When you make the window smaller, they still stack all weird.

Here are some divs I made in order to play around and make it easier to tell when I actually get it right:
http://embroideredpatches.net/test/experiment4.html
I need the columns to always stack properly, always count up in consecutive order.
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41778246
I suppose I can live with this one: http://embroideredpatches.net/test/experiment5.html
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 7

Expert Comment

by:James Bilous
ID: 41778261
Have you tried playing with the col-[size]-[push/pull] stuff? It lets you either push a column right by X columns at a certain width or pull it to the left X columns at a certain width.

In your last example with the numbers (experiment 4) you could, for example, try to pull the second column 1 left and push the 3rd column 1 right at a large width. So something like

<div class="col-lg-12 col-lg-pull-1 padding5"> 

Open in new window


etc.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41778267
Working on it - I have a solution ....
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41778287
What you should do is put all like colours in a single <div class="col-sm-3 col-xs-6"> inside their own div's

Something like this
  <div class="row">
    <div class="col-sm-3 col-xs-6">
      <div><span style="background-color: #f7f9cd"></span>Cream</div>
      <div><span style="background-color: #fff287"></span>Pale Athletic Gold</div>
      <div><span style="background-color: #ffdb00"></span>Light Athletic Gold</div>
      <div><span style="background-color: #ffd400"></span>Athletic Gold</div>
      <div><span style="background-color: #fcbd2c"></span>Dark Athletic Gold</div>
      <div><span style="background-color: #fccf8b"></span>Apricot</div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div><span style="background-color: #fff8ca"></span>Pale Gold</div>
      <div><span style="background-color: #fff0a4"></span>Light Gold</div>
      <div><span style="background-color: #ffba00"></span>Gold</div>
      <div><span style="background-color: #cc8a00"></span>Antique Gold</div>
      <div><span style="background-color: #b77b00"></span>Dark Antique Gold</div>
      <div><span style="background-color: #ab3918"></span>Rust</div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div><span style="background-color: #eee07d"></span>Pale Old Gold</div>
      <div><span style="background-color: #e0d97c"></span>Light Old Gold</div>
      <div><span style="background-color: #e4be23"></span>Old Gold</div>
      <div><span style="background-color: #ab8f00"></span>Deep Old Gold</div>
      <div><span style="background-color: #80620b"></span>Dark Old Gold</div>
      <div><span style="background-color: #fdcb35"></span>Wheat</div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div><span style="background-color: #fbfdb5"></span>Pale Yellow</div>
      <div><span style="background-color: #fbfe89"></span>Light Lemon</div>
      <div><span style="background-color: #ffff51"></span>Lemon</div>
      <div><span style="background-color: #f9ff04"></span>Yellow</div>
      <div><span style="background-color: #ffec00"></span>Deep Yellow</div>
      <div><span style="background-color: #ffd900"></span>Yellow-Gold</div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3 col-xs-6">
      <div><span style="background-color: #ffc59d"></span>Peach</div>
      <div><span style="background-color: #feb97a"></span>Dark Peach</div>
      <div><span style="background-color: #ffab00"></span>Orange Peel</div>
      <div><span style="background-color: #ff9b00"></span>Carrot</div>
      <div><span style="background-color: #ed7600"></span>Burnt Orange</div>
    </div>
...

Open in new window

With styling like this
CSS
<style type="text/css">
.wrapper span {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-right :10px;
}
.row {
  margin-bottom: 15px;
}
</style>

Open in new window

That way when the columns stack they keep the colours together.

Something like this
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41779857
I guess the huge broken-up spaces at xs size is due to text breaking up onto two lines?
http://embroideredpatches.net/test/experiment5.html
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41780333
Yup - but if you look at the screenshot below - 320px wide - things are ok - it needs to be a really small device before that starts happening. If it is a concern however you can make xs trigger at smaller screens sizes and then make that column col-xs-12 (single column).

I think it is fine as it is - but it is your call.
ss59.jpg
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41780344
For me it's happening at a much larger size. Actually, when there are still three columns. What is that program you're using in the screenshot?
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41780378
Actually, when there are still four columns. But only in the browser, not in Dreamweaver live view.

4.PNG
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41780382
Whatever, I'll just make the text smaller. You've gone above and beyond on this issue already.
0
 
LVL 1

Author Comment

by:underrugswept
ID: 41780413
Oh my god, I just noticed this! http://www.marcorpsa.com/ee/t1524b.html
I'll just use that. You need like 5,000 points for this one! Thanks again!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41780440
(grin) - it was a nice challenge - didn't feel like retyping in all those colours so wrote some javascript to parse the table and rewrite the code - it was fun - but you are most welcome as always.
1

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now