Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1353410

    Hi on my site, i a grid row with 3 columns and I want the far left and far right column to have images that are smaller than the 2nd column (see mockup below). How can I make the column 1 and column 3 images smaller so it looks more like my mockup

    Live Site – https://alexandere77.sg-host.com/about-us
    Mockup. – https://ibb.co/P5SqNwj

    Thanks

    #1353414

    Hey navindesigns,

    Thank you for the inquiry.

    You can set padding around the first and third cells to make the images smaller.

    #av-layout-grid-1 .flex_cell:nth-child(1), #av-layout-grid-1 .flex_cell:nth-child(3) {
        padding: 80px;
        top: 50px;
        position: relative;
    }
    

    You may need to replace the selector #av-layout-grid-1 with the custom css class name or custom ID of the grid row element. You can also apply the custom css class name directly to the grid row cells and adjust the css accordingly.

    Best regards,
    Ismael

    #1353461

    Thanks, a few issues

    1- I am now seeing extra white spaces at the top
    2- I need the first column image to go flush left and third column image to be flush right

    Screenshot – https://ibb.co/dBjyxq1
    Mockup. – https://ibb.co/P5SqNwj

    #1353530

    Hi,

    Thank you for the update.

    1.) Try to apply the same background color (#c7c234) directly to the grid row element.

    2.) This css code should help.

    #av-layout-grid-1 .flex_cell:nth-child(3) {
        left: 80px;
    }
    
    #av-layout-grid-1 .flex_cell:nth-child(1) {
        right: 80px;
    }

    Best regards,
    Ismael

    #1353599

    Should I remove the first code you provided and replace it with this new code or keep both? I removed the first code and kept only the new code and here is my result – https://alexandere77.sg-host.com/about-us – the first column and third column images are still too big. it should look like the mockup below

    Mockup. – https://ibb.co/P5SqNwj

    There is not way to just make the images like 60% of the size or something similar?

    #1353670

    Hi,

    Should I remove the first code you provided and replace it with this new code or keep both?

    You should keep both. The previous css code will decrease the size of the first and third images, and the other will adjust their position.

    Best regards,
    Ismael

    #1353741

    where do i set a custom hex color for the entire grid row? . I want to make it #c7c234

    #1353772

    Also, this does not look good on mobile. The first column image and the third column image should be full width on mobile

    #1353833

    Update – I was able to figure out the background color. Now I just need the mobile fix to make sure the first column image and the third column image should be full width on mobile

    #1353836

    sorry for another update. i was able to figure it out – https://alexandere77.sg-host.com/about-us

    thanks for all your help

    #1353864

    Hi,

    Great! Glad to know that you managed to solve the mobile view issue. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Make image NOT take up the full column width’ is closed to new replies.