Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 9, 2019 at 9:29 pm #1076829
    restube

    Hey all,

    I use two grid rows on top of each another. Now I want to create a 20px white space to visually divide the two rows.
    When I place a Separator/Whitespace with a set high of 20px between the two grids and update the page there is a large gap between the grids (way larger than 20px).
    I´ve reduced the height of the whitespace to 1px but the gap remains unchanged. I´ve also tried to use a color section with adjusted padding – same result.

    Is there a fix to the issue? Maybe some css?

    Cheers
    Restube

    March 13, 2019 at 5:03 am #1078091
    Mike

    Hey restube,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

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

    This section has a top & bottom padding, so to make it 20px high we will split the padding in half.

    Best regards,
    Mike

    March 14, 2019 at 10:40 am #1078630
    restube

    Thanks Mike, works perfectly!

    March 14, 2019 at 1:36 pm #1078691
    Mike

    Hi,
    Glad to hear, I assume we can close this now, but I like to ask first. Shall we close this then?

    Best regards,
    Mike

    March 29, 2019 at 1:03 pm #1084560
    restube

    Hey Mike,

    it appears that the solution only works for the gap between the first two grid sections.
    I`ve added a third one below the second and the gap is really big again.

    How can I have it the same as with the first gap?

    Cheers

    March 29, 2019 at 1:38 pm #1084571
    Mike

    Hi,
    Yes the css is very targeted, for your new section also use this css:

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

    Then please clear your browser cache and check.

    Best regards,
    Mike

    January 21, 2020 at 4:00 am #1176538
    mnydish

    How do I reduce the space between 2 rows

    January 21, 2020 at 6:27 am #1176565
    Jordan Shannon

    Hi,

    Seems to come from the photo padding. Add this to quick css:

    .av_one_third.av-animated-generic.pop-up{
padding-top:0px!important;
padding-bottom:0px!important;
}

    Best regards,
    Jordan Shannon

    January 21, 2020 at 12:49 pm #1176687
    mnydish

    this broke the format of the boxes

    January 22, 2020 at 1:33 pm #1177177
    Mike

    Hi,
    Thank you for the feedback, to adjust the space between these rows please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field, I assigned percentages so the values would be somewhat flexible, and targeted the main screen sizes, 425px and under for mobile, 768px, 1024px, 1440px, and above for desktop, and included a little extra around these sizes. This should cover all real devices.

    @media only screen and (min-width: 1299px) { 
	#top.home #av_section_1 > div > div.container > main > div > div > div:nth-child(4) {
	margin-top: -10% !important; 
}
}
@media only screen and (min-width: 999px) and (max-width: 1050px) { 
	#top.home #av_section_1 > div > div.container > main > div > div > div:nth-child(4) {
	margin-top: -25% !important; 
}
}
@media only screen and (min-width: 768px) and (max-width: 800px) { 
	#top.home #av_section_1 > div > div.container > main > div > div > div:nth-child(4) {
	margin-top: -40% !important; 
}
}
@media only screen and (max-width: 767px) { 
		#top.home #av_section_1 > div > div.container > main > div > div > div.flex_column_table > div.flex_column:nth-child(n+2),#top.home #av_section_1 > div.av-section-color-overlay-wrap > div.container > main > div > div > div:nth-child(4) {
		margin-top: -30% !important; 	
		}
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

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