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
}
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.
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
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.
I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.
I was wondering is there anyway to get a exclusive tablet view in foundation with its grid. I want an specific grid layout for desktop [achieved], one for tablet [not achieved] and one for mobile which is done perfectly. but after it's major breakpoint at 768px there's no difference between mobile view and tablet view regarding the columns lining upon each other. If you get what I'm saying some of columns get too big in tablet view which isn't absolutely necessary. There's no necessity to show them with 12-column mobile grid.
Second issue, I downloaded the RTL version of Zurb Foundation (the problem stays when using the original copy), the "row" element which has a role similar to "container" or "wrapper" or something like that, is started from the right side (left side in original version) and it's not absolutely centered. The problem becomes more critical when we enter mobile view and using block grid. Elements are not centered.
I really appreciate your answers guys :)
To answer your first question you can only get the tablet only grid if you are using SASS or SCSS.
*This experimental feature is currently only available by using SASS and importing the _grid-5.scss file into your Compass project. You can also simply download the grid-5.css file, and link to it in your HTML head after your foundation.css.
Medium Grid
As for the RTL can you post a example showing how it looks in RTL and LTR so I can get a better idea of what you are seeing. Also its easier to have one question per post.