Question for 3 column stacking

User 2765857 Photo


Registered User
614 posts

Hello all,

Okay what I have is a page with 2 rows with 3 columns and 3 images, total of 6 images, all is fine until I slide to a smaller px, I wanted to at this break point go from 3 across to 2 across BUT had a hard time doing that :( After some time I was able to figure out to stack 2 across and the next line 1 across because per CC ..."In this case the single element (number 3) could have been centered for example. Stretching the element across the full width of the page is another possibility. " When I do go to a smaller break point I am able to do 1 across ( 12 span) I guess my question is: If I switch to 4 across then I should have no problem stacking 2 across correct?
You can check out the test page at http://kscandyfavors.coffeecup.com/thanksgiving.html

As in the past Thanks for any help you give !

Ray - Still a Novice BUT learning....I think :rolleyes:
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 187934 Photo


Senior Advisor
20,192 posts

If you want two columns next to each other set each one to be 1/2 your span count of your grid. Then anything inside those columns can be adjust by margin or padding or their own width. You may need to set a float left or right for columns depending on the needed result.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2765857 Photo


Registered User
614 posts

Eric,
Thanks for replying the 2 col. @ 6 span ea. Total 12 span is no problem its when i have the 3 col and want it to be 2 col at the next break point it doesn't work right unless I make 1 row under it 1col 12 span and the next row same as the sample page shows. Am I only allowed to do the even rows then ie. 2 -4- or 6 for the stacking to work smoothly?

Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 187934 Photo


Senior Advisor
20,192 posts

What I think you'll need to do is place all of your columns in one row.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2765857 Photo


Registered User
614 posts

Eric Rohloff wrote:
What I think you'll need to do is place all of your columns in one row.

Thanks Eric,
I do have all 3 cols in 1 row, its when it all goes to the next row then it doesn't put 2 images only 1 and where the other image should be it has a blank col space. That is why i added only 1 col in the middle row. I think tomorrow I will change it to use only 2. Cols in place of 3 and make the images larger. Simpler is better.

Ray


Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 187934 Photo


Senior Advisor
20,192 posts

Is this what your after?
http://ericrohloff.com/coffeecup/ccforu … reetwoone/
You can download and study it to see what I did.
http://ericrohloff.com/coffeecup/ccforu … twoone.zip
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2765857 Photo


Registered User
614 posts

Eric Rohloff wrote:
Is this what your after?
http://ericrohloff.com/coffeecup/ccforu … reetwoone/
You can download and study it to see what I did.
http://ericrohloff.com/coffeecup/ccforu … twoone.zip


Eric YES Thank you that is what i was trying to do. I will check ur zip in the am.

I REALLY appreciate the help!!

Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 368762 Photo


Registered User
122 posts

Thanks Eric. I couldn't figure this one out either. Ordered blocks of stuff kept getting out of order!
-Mike
"Live as if you were to die tomorrow. Learn as if you were to live forever" - Gandi
https://elbertcountyfair.com




User 2765857 Photo


Registered User
614 posts

Ray wrote:
Eric Rohloff wrote:
Is this what your after?
http://ericrohloff.com/coffeecup/ccforu … reetwoone/
You can download and study it to see what I did.
http://ericrohloff.com/coffeecup/ccforu … twoone.zip


Eric YES Thank you that is what i was trying to do. I will check ur zip in the am.

I REALLY appreciate the help!!

Ray


Eric once again Thank you for taking the time to look at my problem and add the zip file!
Question I do have is: After checking what you sent this I already had done, it is going from 3 col to 2 col that has me not getting it the way I wanted. I can get it to go from 3 col to 2 col (no problem) for the next BP (about 528 px) and row, BUT that 3rd col then goes on another row under the 2 col ( float left) and from what I think I read in CC then is that col can only be 12 span for that row as the col was uneven number, if even 2, 4 , 6 then no problem
Sorry if I had not explained it right, still a Novice and learning :rolleyes: Maybe I am thinking to deep into this and it is okay the way it is? :|
See Attached screenshot

Thanks, Ray
Attachments:
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 187934 Photo


Senior Advisor
20,192 posts

The column doesn't have to be 12 spans even though that's what I did. You can have it what ever you want. You could make it 4 spans wide and use four Push spans to center it. The image will squeeze down sooner after the first break point. It's your choice in which way you go.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

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.