I have a Container with 4 Containers inside, each of which holds a pic, header text and a paragraph of info.
At all widths below 1616 pixels they all line up as expected either stacked in mobile or 2,3 or 4 in a row at larger widths and the inner containers are all centered on the page.
Then at about 1616px the row of containers shifts to the left margin.
I just can't see what I can do to get the 4 Containers centered on the page, rather than aligned left.
Any ideas?
Carolyn Borjon
Registered User
229 posts
Wayan Jaya
Registered User
4,799 posts
Carolyn Borjon wrote:
I have a Container with 4 Containers inside, each of which holds a pic, header text and a paragraph of info.
At all widths below 1616 pixels they all line up as expected either stacked in mobile or 2,3 or 4 in a row at larger widths and the inner containers are all centered on the page.
Then at about 1616px the row of containers shifts to the left margin.
I just can't see what I can do to get the 4 Containers centered on the page, rather than aligned left.
Any ideas?
I have a Container with 4 Containers inside, each of which holds a pic, header text and a paragraph of info.
At all widths below 1616 pixels they all line up as expected either stacked in mobile or 2,3 or 4 in a row at larger widths and the inner containers are all centered on the page.
Then at about 1616px the row of containers shifts to the left margin.
I just can't see what I can do to get the 4 Containers centered on the page, rather than aligned left.
Any ideas?
what is the width of the outer container?
make sure it's left & right margins are set to "Auto Auto "
make sure the 4 containers left right margins are set to auto auto too
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Carolyn Borjon
Registered User
229 posts
The width of the outer container at 1024 and higher is 2000
The width is set to None at less than 1024
The left and right margins are set to Auto at 1024 & higher
The left and right margins are set to 0 px at less than 1024
I started with the Kit Kat theme so these settings are original settings and work fine in the original layout. The original theme had 8 inside containers but I only need four so have deleted four.
I have tried setting left and right to auto but still at above 1615 that row of containers pops to the left margin.
The width is set to None at less than 1024
The left and right margins are set to Auto at 1024 & higher
The left and right margins are set to 0 px at less than 1024
I started with the Kit Kat theme so these settings are original settings and work fine in the original layout. The original theme had 8 inside containers but I only need four so have deleted four.
I have tried setting left and right to auto but still at above 1615 that row of containers pops to the left margin.
Inger
Senior Advisor
14,450 posts
Do those containers have any 'float left' styling?
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
Carolyn Borjon
Registered User
229 posts
No float left
Here's the CSS
@media screen and (min-width: 64rem) {
.container.info-container {
margin-right: auto;
margin-left: auto;
padding-left: 0;
}
}
Here's the CSS
@media screen and (min-width: 64rem) {
.container.info-container {
margin-right: auto;
margin-left: auto;
padding-left: 0;
}
}
Frank Cook
Registered User
1,535 posts
If the reference is to the Kit&Kat RSD file (downloadable here), I assume that it has been converted by SD V3.
I think that the RSD version in which it was originally prepared may not have had the availability of Flex. It may be that setting the outer container (the one that holds the four inner containers of pictures etc.) to Layout > Display > Flex with Justify set as Center or Space Between would help.
Frank
I think that the RSD version in which it was originally prepared may not have had the availability of Flex. It may be that setting the outer container (the one that holds the four inner containers of pictures etc.) to Layout > Display > Flex with Justify set as Center or Space Between would help.
Frank
Carolyn Borjon
Registered User
229 posts
At above 1024, switching to Flex with Justify set as Center or Space Between caused the pix to stack and enlarge.
I"m out of options and I may have to build a new container of 4 pix. Ugh
I"m out of options and I may have to build a new container of 4 pix. Ugh
Inger
Senior Advisor
14,450 posts
Post you project file, and we'll have a good look at it.
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
Carolyn Borjon
Registered User
229 posts
Thank you!
Wayan Jaya
Registered User
4,799 posts
Wayan Jaya wrote:
Carolyn
You have used "display" Grid for that main container & the Ones inside. But you haven't enabled layout "Design for Grid"
What you need to do is go to the tab "Design For" on the top bar, when that opens, look for choose a new support query,,, open the drop menu then select Display Grid hit the + sign
when that is in place select the pencil & the eye icons
go back to the container with the other containers
under the tab "Grid" hit the "launch Grid Editor"
When its opened just close the grid editor
You will see the contents are now centered,, but the main container width is set to 2000 maximum width,, I suggest you set it to 1500 maximum width
There you have it,, the 4 inner containers now nicely centered
Carolyn Borjon wrote:
Thank you!
Thank you!
Carolyn
You have used "display" Grid for that main container & the Ones inside. But you haven't enabled layout "Design for Grid"
What you need to do is go to the tab "Design For" on the top bar, when that opens, look for choose a new support query,,, open the drop menu then select Display Grid hit the + sign
when that is in place select the pencil & the eye icons
go back to the container with the other containers
under the tab "Grid" hit the "launch Grid Editor"
When its opened just close the grid editor
You will see the contents are now centered,, but the main container width is set to 2000 maximum width,, I suggest you set it to 1500 maximum width
There you have it,, the 4 inner containers now nicely centered
Or you simply go back to "Flex" for the main container, Row=no wrap justify=space around
inner containers set the width to between 20% & 24% (up to you )
There you are again inner containers nicely centered
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
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.
