I'm having issues with this plugin. I'm trying to convert 3 columns to 2 columns for responsiveness in smaller devices. When ever I change the 3 columns to 2 columns from the responsive tab, it pushes the 4th item into third row. Not only that they are not positioned properly either.
This screenshot will help:
You can submit page content in VIsual Composer??
Related
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.
_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.
I have 3 columns in one row in WP with Elementor. I need the last one align to right, when mobile layout is active.
I tried all settings for it, but blind path for me :).
Can you help me how please? Thank you
Pavel
you could try to duplicate the last column, then select the left column and hide it on mobile using the responsive options. You can find them in the advanced settings tab. On desktop and tablet, hide the duplicated column instead.
I have a situation and need help with Visual Composer in WordPress.
I have a ROW with 3 columns. In desktop and iPad it shows normal with 3 columns.
Imagine like this
X X X
On mobile it shows 1 column per row!
X
X
X
I want columns to stack on iPad view as on mobile.
How can I achieve this with Visual Composer?
Can anyone show me the steps. I believe I have to play with Responsive Options on Inner Column Settings...
You can change how the columns stack from the Responsive Tab. When you create a row, on the left side there is a long hamburger menu. Click on it and you will be able to create columns. After you create columns, each column has a +(add), pen(edit) and an x(remove/delete). Click the pen to edit the column. Now there is a tab called Responsive Options. This works like bootstrap since it was built on bootstrap. For Tablet make the first-row width - 12 columns and on the medium size make it 4 columns so they go on one row at 992px.
The responsive media queries for VisualComposer are
small - 768px
medium - 992px
large - 1200px
hey guys i am trying to create a layout which has like 8 columns on left and like 3.5 columns on right.
Now the problem is that 3.5 columns is not supported in in foundation.
how can i achieve that?
Or can i do a custom margin and padding.If so, i guess the layout for mobile will break too.
thanks.
You can easily change pretty much all properties of the grid in SASS version. If you make total column count 24(instead of 12) then 3.5 will be integer number 7. BUT! Much easier option will be nesting grid inside the grid(gridception) so you can subdivide section of arbitrary width (standard 1 to 12 columns) in up to 12 parts.
You want to make a web-page with 11.5 columns.
One way is to customize foundation with 23 column grid structure and have 16 columns on left and 7 on right.Here is the link to customize foundation - LINK
remove the components you dont need and have that stylesheet included for that specific page.
Here is a link to the codepen
http://codepen.io/yashrg/pen/GmhJj
Basically an image gallery that should show images in 5 columns.
I was using the seamless responsive photo grid tutorial from here http://css-tricks.com/seamless-responsive-photo-grid/
But the expected result is not what I expected. I only see 4 columns. Why could this be?