-
Posts
-
I use grid row to highlight some of my client’s services. How do I make it centered and smaller on the screen. See this reference below.
REFERENCE
https://imgur.com/a/zmcR2LINK ORIGINAL SITE
Hey mleite1,
Thank you for using Enfold.
Are you sure that it is the correct screenshot? It looks different from the actual site and the highlighted area is missing. Where can we find the icons?
Best regards,
IsmaelThis is a template we created in Illustrator, but at the time of creating with Enfold we had difficulty. Using grid row we could not. They occupy the full width of the screen. Notice that this example I passed is in the center.
Is it possible to do with enfold?
Hi,
It’s possible with the grid row element. Just apply a Section ID ( ex: custom-grid ) to it so that we can limit the width. On each cell, nest one 1/3 cell for the icon and one 2/3 cell for the remaining content. Use the following css code to limit the width of the grid container.
#custom-section { width: 1300px; margin: 0 auto; }Adjust the width value as needed.
Best regards,
IsmaelHello Ismael,
Hello, in my model, I sent reference are 4 boxes with text and image, each one in a row.
If I create a grid row 1/3 | 2/3 I only get a line with a single icon and a text next to it. And the other 3 to compose the reference image?
REFERENCE
LINK
Hi,
You have to create 4 cells inside the grid row element and then insert a set of 1/3 | 2/3 columns on each cells.
Best regards,
IsmaelHi,
We configured the elements and modified the css modification a bit. Please remove browser cache or hard refresh before checking the page. ( see private field )
Best regards,
IsmaelPerfect Ismael.
I just need a little adjustment. Bring the elements closer. See the picture.
IMAGE
Hi,
Add the following to quick css:
#av-layout-grid-1 .flex_cell.no_margin.av_one_fourth{ padding:30px 0!important; }Best regards,
Jordan ShannonJorda, thanks for the feedback. I notice that you have opted to increase the width of the text block by bringing the elements closer together. But this way is not interesting. It is important for the text layout to stay in two lines. I put a <br> in the text. Notice that the space remains the same.
LINK
Hi,
Edit the cells and decrease the cell padding or decrease the width of the grid row element.
.gridoi { width: 1000px; margin: 0 auto; }Best regards,
IsmaelIshmael, thank you for the return.
The width value does not change anything if you change the value to more than 1000 or less. I added,! Important ;, after the width value and it worked.
.gridoi {
width: 100px! important;
margin: 0 auto;
}But this width value only changes the size of the icon. The distance between the topics does not change.
Do you understand what I want?
Hi!
Edit the cells and decrease the cell padding
Did you adjust the cell padding?
Try to add the max-width value.
.gridoi { width: 100px! important; max-width: 100px !important; margin: 0 auto; }Cheers!
IsmaelIsmael, there are blocks with two elements (icon and text). I wish to approximate these elements (icon and text) to each other. See picture above as an example. See how it was after I added code.
I just want to narrow the spacing between them.
LINK
IMAGE
Hi,
Edit the cells then adjust the padding. And please use a different custom css class attribute for the cells, remove “gridoi”.
Best regards,
Ismael
- You must be logged in to reply to this topic.