-
AuthorPosts
-
August 17, 2021 at 8:39 pm #1317204
Hi! I have 2 grid rows set up and would like to add spacing between the cells and round the corners. I also need the grid rows to not be full screen. I have this css in the child theme:
.av-layout-grid-container {
max-width: 900px !important;
margin: 0 auto !important;
padding-bottom: 5px !important;
padding-top: 5px !important;
}The grid rows are no longer full screen. But I need help adding padding between the cells. I make the changes to the padding setting in each cell but nothing changes.
https://ade-medical.z4pby1v9-liquidwebsites.com/test/
Thanks!
JulieAugust 17, 2021 at 10:28 pm #1317210To add a bit to my question, this is what I’m trying to achieve:
https://drive.google.com/file/d/1X6ca4EZJx3C7FzA3ipjmisSm8Zx-hm0b/view?usp=drivesdkAugust 18, 2021 at 12:56 pm #1317331Hi Julie,
Thanks for the screenshot. I can’t see your actual site though, since there is a htaccess login prompt, could you post the login details in private please?
Best regards,
RikardAugust 24, 2021 at 6:15 pm #1318161Hi Rikard,
I’ve provided the login. I need help with the spacing and rounding the corners.
Thanks!
JulieAugust 24, 2021 at 10:39 pm #1318184Update – I am able to fix the spacing by uploading images that are a specific size. I still need help rounding the corners of the images though.
I also notice when I view https://ade-medical.z4pby1v9-liquidwebsites.com/test/ on mobile, the images stack and the top 2 have no space between them but the bottom 3 do. How can I ad some space between the top images? and on mobile the top 2 images are full width, I’d like some margin on mobile devices.
Thanks!
JulieAugust 28, 2021 at 8:59 pm #1318788Hi,
Thank you for your patience and the link to your test page, for rounding the corners of the background images in your grid row cells it is possible like this:#main > .av-layout-grid-container > .flex_cell.av_one_half { border-radius: 10px; background-size: cover !important; }
but because it is a grid row you will not be able to have a space between the cells, so I recommend removing the background images and adding image elements inside of the grid row cells then set the border-radius like this:
#main > .av-layout-grid-container > .flex_cell.av_one_half img { border-radius: 10px; }
now you will find that at mobile the images are not full-width and you still don’t have a space between the first two images, to correct try this:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #av-layout-grid-1.av-flex-cells .no_margin { padding: 0!important; } #top #wrap_all #av-layout-grid-1 > .avia-builder-el-first { margin-bottom: 20px; } }
linked below is the test page I created to work this out, please check and try this out.
Best regards,
MikeAugust 28, 2021 at 10:04 pm #1318791Thanks Mike, this worked perfectly! That was a great suggestion to remove the image from the background.
A follow up question – if I have a video in one of the cells instead of an image, can I round those corners? I tried this code unsuccessfully:
#main > .av-layout-grid-container > .flex_cell.av_one_half vid {
border-radius: 10px;
}And, is it possible to create a color section that isn’t full width and has rounded corners? OR I can great a grid row with a color background but can I round those corners?
Thanks!
August 28, 2021 at 11:42 pm #1318796Hi,
Glad to hear this helped, for the video try this:#av-layout-grid-4 .avia-video.avia-video-custom, #av-layout-grid-4 .avia-iframe-wrap iframe { border-radius: 15px; }
instead of a color section try a one column with a background color and the border radius, that should work, if not try making a mockup example.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.