Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 93
  • Last Modified:

Basic responsive layout problems

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
underrugswept
Asked:
underrugswept
  • 10
  • 7
  • 2
2 Solutions
 
Julian HansenCommented:
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
 
James BilousSoftware EngineerCommented:
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
 
underrugsweptAuthor Commented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
underrugsweptAuthor Commented:
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
 
Julian HansenCommented:
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
 
underrugsweptAuthor Commented:
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
 
Julian HansenCommented:
Explain the effect you want to acheive
0
 
underrugsweptAuthor Commented:
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
 
underrugsweptAuthor Commented:
I suppose I can live with this one: http://embroideredpatches.net/test/experiment5.html
0
 
James BilousSoftware EngineerCommented:
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
 
Julian HansenCommented:
Working on it - I have a solution ....
0
 
Julian HansenCommented:
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
 
underrugsweptAuthor Commented:
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
 
Julian HansenCommented:
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
 
underrugsweptAuthor Commented:
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
 
underrugsweptAuthor Commented:
Actually, when there are still four columns. But only in the browser, not in Dreamweaver live view.

4.PNG
0
 
underrugsweptAuthor Commented:
Whatever, I'll just make the text smaller. You've gone above and beyond on this issue already.
0
 
underrugsweptAuthor Commented:
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
 
Julian HansenCommented:
(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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 10
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now