Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #884349

    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/zmcR2

    LINK ORIGINAL SITE

    #885404

    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,
    Ismael

    #885566

    This 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?

    #885918

    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,
    Ismael

    #886119

    Hello 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

    View post on imgur.com

    LINK

    #886932

    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,
    Ismael

    #887154

    Ismael, much originated by the return. I did not succeed. I tried and could not.

    Can you send me a code of this assembly? I put it on and I see how you did it.

    or if possible make my wordpress access available ….

    • This reply was modified 6 years, 11 months ago by mleite1.
    #887690

    Hi,

    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,
    Ismael

    #888094

    Perfect Ismael.

    I just need a little adjustment. Bring the elements closer. See the picture.

    IMAGE

    View post on imgur.com

    #888147

    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 Shannon

    #888274

    Jorda, 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

    #888689

    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,
    Ismael

    #889021

    Ishmael, 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?

    #889466

    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!
    Ismael

    #890005

    Ismael, 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

    View post on imgur.com

    #890320

    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

    #890497

    Perfect Ismael. I just need to test on the device.

    #891468

    Hi,

    Alright. Let us know if you need anything else. :)

    Best regards,
    Ismael

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.