Layout questions - Post ID 245845

User 458539 Photo


Registered User
1,228 posts

Smart folks of the forum -

I have a true PITA (in case you haven't heard that one it stands for Pain In The A**) client that is beyond picky -

I originally set up this page (not totally tweaked but you get the idea)

http://tippingproductions.com/tpc/demos … o_old.html

They decided they wanted the subcategories all lined up - but responsive. Since it would have to sit in the same column the getting it to respond I tried putting everything in container so I could set the height at break points like
:

http://tippingproductions.com/tpc/demos … micro.html

Thought I was clever but when I need to expand the columns (for responsive) I can't keep it all lined up - even when I play with many combinations of float/clear -

Any thoughts? - completely open to what makes sense. If its total redesign thats ok. I'm just curious as to how I should have done it. Its probably quite simple just not clear at the moment

Thanks in advance

Byron
User 122279 Photo


Senior Advisor
12,389 posts
Online Now

Creating a responsive layout means that columns line up until they look squashed, then they appear one below the other. Or maybe your 4 columns first could be reduced to two, then at an even smaller screen they appear just as one column. You need to educate the site owner.
I started transforming a site for a client to responsive about 1.5 year ago, and I had the same issue with the sidebar. The site owner didn't want it to drop below the main contents, no matter what I said, and you can see how squashed it looks if you check it on a phone: www.upholster.com. You may show your client this site to demonstrate what you have to tell him. ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 458539 Photo


Registered User
1,228 posts

Agree

The first one does what you are describing

- but will keep thinking was hoping I could find something that would be closer to what they want

Thanks
User 10077 Photo


Senior Advisor
1,025 posts
Online Now

When doing the site responsive, the whole point is to have the columns stack to keep it looking good. The other issue I thought about is the text that appears under each box. When the columns stack, the text that goes with each subcategory moves away from it's colored heading (picture/title).

You might consider using one row with four columns as you have done. However, instead of coloring each column, put a 2-column sub-grid (each column set to 12 spans) in each main column with each sub-grid column set to 12 spans.

As a side benefit, it could also give you some extra layout options. For example, when you get down to about 700px wide, you could make all four categories stack. Set the column that contains the sub-grid to 12 spans. For the sub-grid, make the picture/title column 4 spans and the description 8 spans. This allows all 4 categories pictures to appear one above the other with each one's description beside it.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 1889382 Photo


Registered User
13 posts

I'm not sure if this is where I ask this question, but hopefully I can get an answer. I'm in the process of converting my 25 page website to the RLM format. I've made good progress on the index page but need to know if I copy the old meta files to the new index page. Here are some examples of what is on the old one.

<meta name="Keywords" content="painting techniques, painting with acrylics, oil, pastel art, watercolors, water-soluble oils, digital painting ">
<meta name="Description" content="Painting techniques including watercolor techniques, oil painting techniques, painting with acrylics, pastel art, and digital painting are discussed by nature artist, Judy Filarecki ">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="ROBOTS" content="all">
<meta http-equiv="CONTENT-LANGUAGE" content="EN">
<meta name="revisit-after" content="7 days">
<meta name="Copyright" content="filarecki.com">
User 10077 Photo


Senior Advisor
1,025 posts
Online Now

Click on Layouts and then Manage Project. Select the page for which you want to add the meta tags.

There is a box there that says, "Add your <head> content for the selected page..." Put your meta tags in that box. When you export your site, the meta tags will be on the page. The only thing you will need to change is your <title>.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.