0

This is my wsebsite done with Elementor: https://studiopless.pl/

If you scroll to "portfolio" section there is a gallery grid which should be displayed in 4 columns on desktop and 2 columns on tablets. However it is still displayed in 4 columns on my tablet (iPad 12,9"), so the setting from Elementor don't recognise my device correctly. If I change an amount of columns for the div element it makes 2 columns 4 images each, so I have 8 columns instead. I don't know which element I should apply the CSS to and which property to apply.

Jakub Bizoń
  • 1
  • 1

1 Answers1

0

_Option A

Have you tried adjusting the breakpoints in the Elementor settings? Maybe the screen size of your iPad is simply too big so that Elementor doesn't "understand" that it's already supposed to display the tablet version.

This tutorial by Elementor might help: https://elementor.com/help/additional-breakpoints/

_Option B

I'm not sure I understand that last part of your question, specifically how many rows you would like for the gallery grid to have. You could also inspect the code (right click on the images you don't want to see --> then select "inspect"), and hide the entire class using a mobile query in custom CSS.

If you want to only see 4 images in total (2 columns, 2 rows) on tablet, your code could look like this:

@media only screen and (max-width: 1028px) {
.e-gallery-item.elementor-gallery-item.elementor-animated-content:nth-child(n+5) {
    display: none;
}
}

These links might be useful for you:

Mobile Query: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Breakpoints: Media Queries: How to target desktop, tablet, and mobile?

_Option C

If the options above don't solve your problem, you might want to consider creating 2 or even 3 different sections for a) desktop, b) tablet and – potentially – c) mobile and then changing the settings in Advanced --> Responsive for each one of them individually and hiding the sections you don't need for the respective version.

Julia
  • 43
  • 6