- This topic has 7 replies, 2 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
December 10, 2019 at 10:01 am #1100138Jeff
Hi All,
Sorry if this is a noob question, but I’ve been struggling with this for 2 days now… Even after reading through numerous threads here on GP forums.
On my homepage I am using Sections (Container Width = Full Width) and I am trying to create a simple 3 column layout with a border box around each item. I also have Tom’s awesome Simple CSS plugin installed so am applying the CSS to just this page.
I first used div class grid-33 and it does the job, but I wanted some space between each box so I tried grid-30 instead with margin:10px. (if I do grid-33 with margin:10px it bumps the 3rd box to a new row). This works… BUT… The 3 boxes are not centred on the screen. The centre box is not centre to the screen, it’s off centre to the left, and there is a noticeably larger space to the right of the right box than to the left of the left box. It’s like all 3 boxes need to shift to the right to be centred.
I tried wrapping everything in a grid-container with max-width: 100%; and margin:0; padding:0; but that didn’t seem to work and the boxes appear more contained (and still not centred) than they do when I don’t wrap it..
Any help would be much appreciated. Code below.
Thanks,
Jeff<div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading1</strong></h3> Column 1 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading2</strong></h3> Column 2 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading3</strong></h3> Column 3 </div>
CSS:
h3 { color: orangered; font-size: 18px; text-align: center; } p { color: black; font-size: 15px; text-align: left; } .grid-30 { background-color: white; border-style: solid; border-color: orangered; border-width: 3px; margin: 10px; padding: 15px; } .custom-container { max-width: 2000px; background-colour: red; align: center; text-align: center; margin-left: auto; margin-right: auto; }
December 10, 2019 at 1:02 pm #1100293DavidStaffCustomer SupportHi there,
would you be able to provide a link to the page where we can see this issue?
December 10, 2019 at 9:41 pm #1100563JeffHi David,
Sure thing. I just added the code to a new site I’m working on.
You can check it out at:
http://sccmpowershell.com/about-meThanks!
JeffDecember 11, 2019 at 6:40 am #1100932DavidStaffCustomer SupportYou need to add the
grid-container
to your HTML ie.<div class="grid-container custom-container"> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading1</strong></h3> Column 1 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading2</strong></h3> Column 2 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading3</strong></h3> Column 3 </div> </div>
Then use the custom-container class to overwrite the max-width.
December 11, 2019 at 8:07 am #1101163JeffThanks David,
I tried that too and the max-width seems to work but no joy on the centering part. I’ve updated the page. You can see the result at http://sccmpowershell.com/gptest.
If we can get the 3 boxes centred in the blue rectangle we’ll be good! ๐
HTML:
<p style="text-align: center;">CENTER - Custom Container</p> <div class="grid-container custom-container"> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading1</strong></h3> Column 1 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading2</strong></h3> Column 2 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading3</strong></h3> Column 3 </div> </div> <hr> <p style="text-align: center;">CENTER - No Container</p> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading1</strong></h3> Column 1 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading2</strong></h3> Column 2 </div> <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column"> <h3><strong>My Heading3</strong></h3> Column 3 </div>
CSS:
h3 { color: orangered; font-size: 18px; text-align: center; } p { color: black; font-size: 15px; text-align: left; } .grid-30 { background-color: white; border-style: solid; border-color: orangered; border-width: 3px; margin: 10px; padding: 15px; } .custom-container { max-width: 100% !important; background-color: steelblue !important; align: center !important; margin: 0 !important; }
December 11, 2019 at 9:12 am #1101231DavidStaffCustomer SupportPersonally i find the unsemantic grid a bit of pain. I would do something like this:
<div class="flex-grid"> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> <div class="flex-item"> <div class="flex-inner"> <h2>Grid item</h2> </div> </div> </div>
.flex-grid { padding: 20px; background-color: blue; } .flex-item { padding: 10px; /* itme Gutters */ box-sizing: border-box; } .flex-inner { background-color: white; border-style: solid; border-color: orangered; border-width: 3px; padding: 15px; } @media (min-width: 769px) { .flex-grid { display: flex; justify-content: center; } .flex-item { flex-basis: 33%; } }
It requires a little more mark up by introducing the inner container on the grid item
flex-inner
. But this allows you use padding on theflex-item
to control your gutters.December 11, 2019 at 9:34 am #1101266JeffThanks David. Yes it has been a pain! ๐ I’ve tried your code and it works great. I should be good to customize it from here. Thank-you very much for all your help!
December 11, 2019 at 9:59 am #1101290DavidStaffCustomer Supportunsemantic relies on CSS floats and clearfixes which makes me squirm lol…. glad to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.