Portfolio grid: space between the items (but not on the outer edges)

Hey fkm,

Thank you for using Enfold.

How did you add the gap or space between the items? You should be able to remove that space for every 4th item in the row using nth child selectors. Please check the following article for more info about nth child selectors.

// https://css-tricks.com/almanac/selectors/n/nth-child/
// https://css-tricks.com/how-nth-child-works/
// https://www.w3schools.com/cssref/sel_nth-child.asp

Best regards,
Ismael

Hi,

Thanks for the update. I’m not sure if this will work, but please try this CSS in order to target every fourth element, and give it a margin-right of 0:

.grid-entry .inner-entry:nth-child(4n) {
  margin-right: 0 !important;
}

Best regards,
Rikard

Hi,

Thanks for the update. You could try to adjust the container element instead like so:

.page-id-22 #av_section_1 .container {
    max-width: 1280px;
}

Let us know if you are ok with those results.

Best regards,
Rikard

Hi,
Sorry for the very late reply and thanks for the links. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#av-sc-portfolio-1 > div > div.first > article {
	margin-left: 0 !important;
}
#av-sc-portfolio-1 > div > div.grid-loop-4 > article,
#av-sc-portfolio-1 > div > div.grid-loop-8 > article,
#av-sc-portfolio-1 > div > div.grid-loop-12 > article,
#av-sc-portfolio-1 > div > div.grid-loop-16 > article,
#av-sc-portfolio-1 > div > div.grid-loop-20 > article,
#av-sc-portfolio-1 > div > div.grid-loop-24 > article,
#av-sc-portfolio-1 > div > div.grid-loop-28 > article {
	margin-right: 0 !important;
}

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

Best regards,
Mike

Hi,
Thank you for pointing that out, so instead of removing the right margin on every fourth item, let’s remove 25px of right side padding to make up this difference.
So please remove this part of the css:

#av-sc-portfolio-1 > div > div.grid-loop-4 > article,
#av-sc-portfolio-1 > div > div.grid-loop-8 > article,
#av-sc-portfolio-1 > div > div.grid-loop-12 > article,
#av-sc-portfolio-1 > div > div.grid-loop-16 > article,
#av-sc-portfolio-1 > div > div.grid-loop-20 > article,
#av-sc-portfolio-1 > div > div.grid-loop-24 > article,
#av-sc-portfolio-1 > div > div.grid-loop-28 > article {
	margin-right: 0 !important;
}

and add this css:

#geschichte > div {
	padding-right: 25px !important;
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear this helped, for mobile please try this css:

@media only screen and (max-width: 767px) { 
	#top #wrap_all #geschichte > div {
	padding-right: 0 !important;
}
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, your test page seems to have been removed, do you have a new URL?

Best regards,
Mike

Hi,
Welcome back and thanks for the link, please try this css:

@media only screen and (max-width: 767px) { 
	.responsive #top #wrap_all #projekte .grid-entry.flex_column {
		width: 104% !important;
	}
}

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

Best regards,
Mike

Hi,
Glad to hear this helped and you are happy, your css is sound, but you could use (orientation: landscape) or (orientation: portrait) like this:

@media only screen and (max-width: 767px) and (orientation: landscape) {
.responsive #top #wrap_all #projekte .grid-entry.flex_column {
width: 103% !important;
}
}

this would allow you to be more specific.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike