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
Layout questions - Post ID 245789
Byron Tipping
Registered User
1,625 posts
Inger
Senior Advisor
14,565 posts
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.
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 work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Byron Tipping
Registered User
1,625 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
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
Brian Durfee
Senior Advisor
1,096 posts
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.
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.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
Judy Filarecki
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">
<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">
Brian Durfee
Senior Advisor
1,096 posts
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>.
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>.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
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.
