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.
Related
The goal is to have 2 diferrent email layouts - one for mobile and one for desktop. The desktop version has 2 columns and in the mobile version the content should collapse to only 1 column (like in pictures below desktop view, mobile view). It’s important that if the blocks are different heights the border on the left is the same height for both of them.
It’s also important to have as little code duplication between the mobile and desktop views as possible otherwise the email size would be too large.
You can use flexbox.
set min-width to the cards and set display: flex to parent contained. and set flex-wrap: wrap
Example:
Codepen
PS: Ignore JS Part in the Codepen
I am building a website with 3 designs, depending on the screen width.
My html/php file contains the content in the following order (relating to the picture): B, A, C.
Link to responsive layout blocks picture
Phone: This is the same order as desired for the phone version, so that version is easily solved.
Desktop: I use one div that wraps around all 3 parts; with display: flex in combination with the order property I was able to generate the desktop version, so that one was also easily solved.
Tablet: But unfortunately I can’t get the tablet version working. When I wrap a div around A and C the desired tablet layout is easily obtained, but then it is not possible anymore to put B in between them for the desktop version (even if the CSS media query for the desktop does not mention that specific div).
My question: Is it possible to put a flexbox column inside flexbox row, but only for the tablet version?
I have tried several things with the flex-direction and align-items properties, but haven’t succeeded unfortunately. Maybe it is not possible?
Any advice would be very much appreciated!
You can detect when the website is visited from a phone or tablet with plain js:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
//Do stuff
}
Or use a 3rd party library such as wurfl.io to detect only tablet users:
if (WURFL.is_mobile === true && WURFL.form_factor === "Tablet") {
//Do stuff
}
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
WordPress already allows us to create multiple menus and edit their items. I would like to offer one kind of menu (with more items) to my users coming from desktop browsers and a more condensed menu to user-agents which reveal that they are using mobile browsers.
My theme is already using a responsive menu which shrinks it when the screen size is too small, but I'd like to take it one step further, since I have a bit too many options in my main menu to make for comfortable browsing on mobile.
If you are only to subtract elements, not add anyone new, I would go about this using pure CSS.
An example:
#media screen and (max-width: 700px) {
.menu_element1 {
display: none;
}
}
If by 'one step further' you mean displaying a totally different menu, not just subtracting, but also altering or adding new elements, you could probably create several menus and load the correct one using wp_is_mobile(); Althought from Codex it seems this is not recommended, since tablets are considered mobile devices - and probably isn't bulletproof in other aspects either.
A third alternative would therefor be to use Javascript to determine the screen size and load the appropriate stylesheet.
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