-
AuthorPosts
-
March 6, 2019 at 8:29 pm #1075607
Hey guys, I’ve tried to use some of the solutions on the forum to contain the content within my grid rows to sit within the constraints of the content wrapper of the entire site.
I would like all the content to sit justified to the left on top of the background image the edge of where our logo sits and doesn’t expand out further.
If I add max-width CSS it only seems to work on the image itself but actually I only want it on the content within.
Seems like an alignment issue? How do I align the edge of the containers within the grid row to sit on the edge of the site’s container width?
I’m really struggling here and cant figure this out, I’ve probably done all manner of random quick CSS now and asiggning everything and anything with the custom class of “top-grid”
….please help…
March 6, 2019 at 8:57 pm #1075621Its Alright, I’ve gone and figured it out.
Cheers guys!!!
March 6, 2019 at 8:58 pm #1075622Nope, it’s not working on the two column split…..sigh…..
March 11, 2019 at 4:13 am #1077193Hi,
Thank you for using Enfold.
You can apply the “Maximum Container width” value to be the maximum width of the grid container and then set its margin to “0 auto”, so it perfectly aligns with the default container. Have you tried that?
For example, assuming that there is only 1 grid element in the page, you can use this code:
#av-layout-grid-1 { width: 1410px; margin: 0 auto; background: red; }
You can replace the generic selector with the element’s Section ID or enable the custom css class field.
Best regards,
IsmaelMarch 11, 2019 at 5:06 pm #1077422Hi Ismael,
Well, thanks for creating Enfold!
That doesnt seem to work unfortunately, this is the CSS i’m using:
It seems to work fine on single full page width but as soon as it goes into a two column view formatting gets lost
/* Grid CSS */
@media only screen and (max-width:767px) {
#av-layout-grid-2 {
display: flex;
flex-direction: column-reverse;
}
}@media only screen and (max-width:767px) {
#av-layout-grid-4 {
display: flex;
flex-direction: column-reverse;
}
}@media only screen and (min-width:1310px) {
#top .flex_cell_inner {
max-width: 1310px !important;
margin: 0 auto !important;
padding-left: 50px !important;
}
}@media only screen and (max-width:1310px) { #top .flex_cell_inner {
max-width: 1310px !important;
margin: 0 auto !important;
padding-left: 0px !important;
}
}
#top .lcell .flex_cell_inner {max-width: 655px !important;
position: relative;
float: right; }
#top .rcell .flex_cell_inner {max-width: 655px !important;
position: relative;
float: left; }Thanks,
SeanMarch 18, 2019 at 10:05 am #1079787Hi Sean,
Thanks for the update.
Could you give us a screenshot of the expected layout? You can upload it to imgur or dropbox.
Best regards,
IsmaelMarch 18, 2019 at 12:52 pm #1079857Here you go Ismael,
Basically its the alignment of the text with the outer edge of the container, it seems to be adding some padding or extra margin, meaning it doesn’t sit perfectly with the outside of the page container (something to do with the 50px I had to add to the single cell grid row to make it sit perfectly maybe?)
I’ve tried fiddling around with padding but I can’t seem to find a way to right align the text to the container edge, I’m using the “float” css to keep the content sitting close to the centre at the moment.
perhaps I am referencing it wrong in the css, i have left cell and right cell labelled “lcell” and “rcell” in custom css.
Thanks again,
SeanMarch 19, 2019 at 6:35 am #1080226Hi,
Thanks for the update.
Have you tried adjusting the “Cell Padding” of the cell inside the grid row? It is currently set to this:
padding: 100px 100px 50px 100px;
The left padding is set to 100px, so the text inside the cell doesn’t align with the logo.
Best regards,
IsmaelMarch 20, 2019 at 1:18 pm #1080801Oh. My. God. Such an oversight. I’ve been fiddling about with CSS padding and margin and didn’t think about avia layout assigning padding.
Thank you so much Ismael, I got stuck on that for so long.
Using enfold = Winning at life.
Cheers!
- This reply was modified 5 years, 8 months ago by realisedesign.
March 20, 2019 at 10:40 pm #1081070Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Contain content within Grid row to sit within site container’ is closed to new replies.