-
Posts
-
I am trying to do a page that has similar elements to this example: Cliffs Living
I want to have the formatting have a 1/4 – 3/4 section with a photo and then text. Then below have the same thing with a call to action in the 1/4 and a photo in the 3/4 section.
Every time I do this, the default settings has space between the columns. When I try to use the grid row, it overtakes the width of the page.
I’m hoping there is a straight forward way to build a page similar to my example.
Please advise.
Thanks!Hey dabomb!
You could use a grid row element and add a blank 1/5 + 1/5 cell on either side of of the content.
Best regards,
ElliottThat could work, but how do I do a grid row with only 1 column? If I could remove the margin-left for the specific grid elements, that would get me what I need. Is there a way to put in some custom css and then reference that?
The difference between the grid row, the width is the total width of the browser, and there is no margins. Here is the example:
layout exampleThe column elements only go the width of the max width in the general layout piece in the theme settings. You can reduce the top and bottom margins for the column elements to 0, but there is always a left margin. I was able to use the Chrome Developer tools to get the layout how I want it by tweaking the margin-left from 6% to 0, and then I change the width from 64% to 70%.
layout example 2
code exampleIs there a way to put in some custom css and then have the grid layout elements reference those elements to get the page and the spacing the way I want?
Hi!
I’m not sure I understand. It looks like your wanting to use the grid row element though, if your wanting the columns to expand to the full width of the screen.
Best regards,
ElliottI want to be able to build a 1/3 – 2/3 element that has no margins that is not full width, but the width of the main container. The grid row takes the full width and has no margins. The columns allow me to control the top and bottom margins, so I can set that to 0. it doesn’t allow me to control the left margin, which has a default of 6%, causing the space between the 2 columns next to each other.
I simply need some guidance on how to set things using the columns, but removing the left margin on the second column, so I can get the content right next to each other without the spacer of the margin. Please look at the screen shots I included to see exactly what I mean.
thanks!
Hey!
Use the grid layout then constrain the width of the container by using css:
.av-layout-grid-container { max-width: 1310px; margin: 0 auto; }You can apply this style on specific grid by adding a unique id in the Section ID field.
Regards,
IsmaelThanks for the tip. How do I create that setting as a unique style? Can I do something like:
.av-layout-grid-container-promo for the id, and then put the css in the quick css section for the theme
http://prntscr.com/a0qal2And then in the unique ID put in av-layout-grid-container-promo
http://prntscr.com/a0qbnnIs that the correct way to implement this? I tried that and the grid is still full width. Any thoughts?
Hi!
Did you add “promo” in the section id field? If yes, you can use this:
#promo { max-width: 1310px; margin: 0 auto; }If you type in “av-layout-grid-container-promo” in the field, use this:
#av-layout-grid-container-promo { max-width: 1310px; margin: 0 auto; }The .av-layout-grid-container is the class attribute of all grid layout elements so we have to apply a unique id to it. Fore more info, please visit the link: https://css-tricks.com/the-difference-between-id-and-class/
Regards,
Ismael
- You must be logged in to reply to this topic.