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
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'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??
I don't understand enough from Bootstrap.
How do I use Bootstrap to only show the mobile view (the three lines) at every resolution on my website?
The easiest way would be to go to http://getbootstrap.com/customize/#grid-system and change the value of #grid-float-breakpoint to #screen-lg or to a very large pixel value (ex. 9000px). Then download the updated bootstrap file with the "Compile and Download" button at the bottom of the page. Use the new files in your site files and the navbar will stay collapsed up until the browser is the width that you set.
You can't show the 3 lines at every resolution of your website. Bootrap only condenses the nav as the screen gets smaller. If you want to show the 3 lines you'll have to find the CSS for that in the bootstrap file and mimic it with new CSS conditions.
Is there a way in bootstrap's css to show some level of details for some devices and more for others.
My example would be groupon. If you visit groupon on your iphone you can see single column with offer after offer , yet visit the site on your desktop and you see different looking versions of the same offers, but they are positioned in a 4x1 box rather than a 1x1 scrollable list.
The whole page looks different. This must mean some elements detect they are being rendered on a small device and therefore dont show, am I on the right lines?
I am very new to bootstrap!
You can use the bootstrap hidden-sm field on certain td elements to make them disappear on certain screen sizes.
It would also be worth look at the responsive tables class to make a scrollable div to fit wider tables as well