Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 31, 2021 at 5:20 pm #1291601
    JaneJoyce

    Hello.

    Two questions ….
    The first is about adjusting the space between grid rows. I have four full-width grid rows each with five cells. I have not been able to find a way to control the vertical distance between rows. From information in another support thread, I was able adjust the distance between the first and second grids using this formula …

    #top.page-id-337 #after_submenu_1 > .container > .content {
    padding: 0 !important;
    }

    But this has no effect on subsequent rows. How can I set the rows a consistent 4px apart?

    The second question ….. is about the content in the grid cells. All the cells are set are to zero padding all sides. The cells contain a variety of image formats : single feature images, blog post sliders, content sliders and easysliders. In terms of vertical alignment/padding in the cells, each of the four content types sits differently. How can I remove all padding from: single feature images, blog post sliders, content sliders and easysliders?

    A big thank you in advance

    Jane Joyce

    April 1, 2021 at 6:29 pm #1291865
    JaneJoyce

    Hello again

    Still trying to get the grid rows to move up under each other. I suspect the extra space is being caused by padding/margin below the Blog Post sliders that are inside some of the cells (ie, the extra space is inside the cells). Have tried setting 0 padding/margin on every combination of post slider classes I can find, but no joy. Please could you let me know if Blog Post sliders have margins set, and if so how to change them.

    I have realised that the css in the earlier message is not affecting the grid row spacing. How can I also set that padding/margin?

    Many thanks

    April 3, 2021 at 9:20 am #1292069
    Rikard

    Hi,

    Thanks for the update. Could you post a link to where we can see the elements in question please?

    Best regards,
    Rikard

    April 6, 2021 at 2:06 pm #1292779
    JaneJoyce

    Hi Rikard

    Have managed to eliminate all extra space inside grid cells, so all that’s left to eliminate is the extra space between each grid row. There are four rows. I used relative positioning to get them into the right places, using the following styles …

    #anniv-carousel-top-row { left: -50px; width:106%; }
    #anniv-carousel-second-row { left: 14%; width: 80%; height: 25%; position: relative; top: 5px; }
    #anniv-carousel-third-row { left: 0px; width:100%; position: relative; top: -35px; }
    #anniv-carousel-fourth-row { left: 80px; width: 80%; height: 25%; position: relative; top: -75px; }

    So, when you follow the link below, you should see the page looking OK. But I can’t help thinking that doing it with relative positioning is asking for trouble when it comes to handling the responsive behaviour. Could you let me know how to eliminate the space between grid rows via margin adjustment before I launch into working on the tablet and mobile versions?

    Many thanks

    April 8, 2021 at 4:25 am #1293162
    Rikard

    Hi,

    Thanks for the update. It looks responsive on my end, at least down to mobile size. If you don’t want to apply your CSS for mobile, then you can wrap it in a media query, like so:

    @media only screen and (min-width: 768px) {
  Your CSS for tablet and desktop goes here
}

    Best regards,
    Rikard

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