Keep n number of elements in row

  • Resolved guev4ra

    (@guev4ra)


    3 years, 10 months ago

    Hello.

    Maybe I am repeating myself, but I couldn’t find a post that should solve my issue.

    Is there a possibility to apply let’s say 3 elements/images inside one row and only to break down to one col/img/element per row if I’m on 768px or less?

    I tried “simple portfolio” layout, as well as the responsive one, but no luck, it asks me to define width of an image in pixels.

    To sum up, I want preferably “simple portfolio” layout with exactly 3 columns on desktop (any screen wider than 768px), and if the screen is lesser than 768px of width, I’d want to break down to one column. How do I solve this?

    Thanks in advance.

Viewing 1 replies (of 1 total)
  • Thread Starter guev4ra

    (@guev4ra)

    Fixed it. The solution above will make your simple portfolio gallery to break into two columns if width of screen is less than 1300px, and force 3 columns if it is greater than 1300px, with nice padding around:

    
@media screen and (max-width: 1300px) {

	#foogallery-gallery-614.foogallery.fg-simple_portfolio .fg-item {

		margin: 20px !important;
		max-width: calc(50% - 40px) !important;

		min-width: calc(50% - 40px) !important;
	}
}

@media screen and (min-width: 1200px) {

	#foogallery-gallery-614.foogallery.fg-simple_portfolio .fg-item {
               margin: 5% !important;

		max-width: calc(30% - 180px) !important;
		min-width: calc(30% - 180px) !important;

	}

}
    • This reply was modified 3 years, 10 months ago by guev4ra.
    • This reply was modified 3 years, 10 months ago by guev4ra.
    • This reply was modified 3 years, 10 months ago by Yui. Reason: please use CODE button for proper formatting
Viewing 1 replies (of 1 total)
  • The topic ‘Keep n number of elements in row’ is closed to new replies.