Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 14, 2020 at 3:56 pm #1252797
    kitchkitch

    Hi All,
    I’m struggling to find out how to achieve the following: I’m using a Grid Row layout split in to 2/3 and 1/3, the 2/3 cell contains a set of six images all set at 1/2 size which creates a grid 2×3, however when I ‘edit column’ and choose space between columns the space is too large, I would like the space between the images to be 10px, is there a way of reducing the space between the columns?

    I tried adding padding to the images which worked well on desktop but when viewed on mobile the images would reduce in size because of the padding added, I abandoned this approach.

    Thanks in advance.

    October 16, 2020 at 3:45 pm #1253288
    Victoria

    Hey andy,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

#top .av_two_third .av_one_half {
    margin-left: 10px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 18, 2020 at 3:06 pm #1253611
    kitchkitch

    Hi Victoria,

    Really cool that piece of code works perfectly. I added ‘margin-bottom: -40px;’ to bring the section in to a regimented grid layout. I have an image below the .av_two_third .av_one_half which now needs coding to vertically align with the images above. I tried the code below hoping this would work but nothing happened. Can you help me solve this issue please.

    #top .av_two_third .av_one_full {
    margin-left: 10px;
    }

    Thank you.

    October 18, 2020 at 7:40 pm #1253691
    Victoria

    Hi kitchkitch,

    Could you please attach some screenshots of the issue?

    It’s not very clear to me what you’re trying to move.

    Best regards,
    Victoria

    October 18, 2020 at 8:32 pm #1253698
    kitchkitch

    Hi Victoria,

    I’m wanting to align the last image, right and left margins so that they align with the images above. Hopefully the link will help to identify the area.

    Thank you!

    October 19, 2020 at 12:58 am #1253737
    Jordan Shannon

    Hi,

    Add this to quick css:

    #top #av-layout-grid-1 .av_two_third .av_one_half{
margin-left:0px!important;
}

    Best regards,
    Jordan Shannon

    October 19, 2020 at 11:18 am #1253892
    kitchkitch

    Hi Jordan,

    The code provided doesn’t adjust the margin of the bottom image only the images above. I have attached a more detailed image, hopefully this helps.

    I altered your code to the code below hoping the ‘margin-left:10px!important;’ would work but no joy.

    #top #av-layout-grid-1 .av_two_third .av_one_full{
    margin-right:10px;
    margin-left:10px!important;
    }

    Thanks,

    October 19, 2020 at 11:26 am #1253899
    kitchkitch

    Sorry, this is the code I used which had no joy with the right margin.

    #top #av-layout-grid-1 .av_two_third .av_one_full{
    margin-right:10px!important;
    margin-left:10px!important;
    }

    Thanks,

    October 19, 2020 at 3:09 pm #1253992
    Victoria

    Hi kitchkitch,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width:990px){
    #top.postid-1892 #av-layout-grid-1 .av_two_third .av_one_full {
        padding-right: 33px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 19, 2020 at 3:50 pm #1254027
    kitchkitch

    Hia,
    Ok, works just like adding padding to the image direct, which is great for desktop, the image still doesn’t align when I switch to tablet portrait, is it not possible to adjust the margin-right? Does margin-right even exist? I will be using the same layout for all the product page so it would be great if i don’t have to write individual code for each image.

    //**At the moment i’ve set the image to only display on desktop until we can find a solution.

    Thanks,

    Andy

    October 20, 2020 at 8:55 pm #1254441
    Victoria

    Hi kitchkitch,

    The right margin exists of course, but it does not have any effect in this case. You just need to use media query and choose a different value for smaller screens.

    Best regards,
    Victoria

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