-
AuthorPosts
-
May 30, 2022 at 5:37 am #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/P5SqNwjThanks
May 30, 2022 at 6:14 am #1353414Hey 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,
IsmaelMay 30, 2022 at 3:23 pm #1353461Thanks, 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 rightScreenshot – https://ibb.co/dBjyxq1
Mockup. – https://ibb.co/P5SqNwjMay 31, 2022 at 7:38 am #1353530Hi,
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,
IsmaelMay 31, 2022 at 2:52 pm #1353599Should 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?
June 1, 2022 at 5:16 am #1353670Hi,
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,
IsmaelJune 1, 2022 at 1:10 pm #1353741where do i set a custom hex color for the entire grid row? . I want to make it #c7c234
June 1, 2022 at 3:36 pm #1353772Also, this does not look good on mobile. The first column image and the third column image should be full width on mobile
June 2, 2022 at 1:53 am #1353833Update – 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
June 2, 2022 at 2:16 am #1353836sorry for another update. i was able to figure it out – https://alexandere77.sg-host.com/about-us
thanks for all your help
June 2, 2022 at 8:11 am #1353864 -
AuthorPosts
- The topic ‘Make image NOT take up the full column width’ is closed to new replies.