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
Related
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've got a simple four-column card layout (Bootstrap grid), which collapses to a single-column layout on mobile. I want to embed a Facebook post within one of the cards. The problem is that Facebook embedded posts on desktop don't expand/collapse to fill their parent container, as they do on mobile. What I'd like to know is if there is a way around this. My cards are about 270px wide, which is below the 350px minimum width for desktop, according to their docs.
My container is a simple div like so:
<div class="content">
<div class="fb-post" data-href="{{post.facebook_link}}">
<!-- Here is what the embedded post's structure looks like -->
<span>
<iframe>
<!-- Widget lives in here -->
</iframe>
</span>
</div>
</div>
Right now when I embed a post in one of my cards, the post forces the card to expand, which wrecks my layout (see attachment). I'm looking for a way to force the post to fill the parent container either through a CSS/JS solution or tricking the Facebook SDK to thinking that it's on mobile.
I've only come across one other post on this issue, but that person explicitly wanted the mobile version of the post. In my case I don't care if it's the mobile version or desktop version as long as I can get it to fill the parent container. For that reason, this question is not a duplicate.
So far I've tried manipulating the height/width of the iframe and/or its parent span element, but as soon as I adjust those numbers, the changes are undone, since the SDK is setting them dynamically.
One way around this is that worked for me, was to use hidden and visible divs using bootstrap 3 css and adjust data-width in facebook code to suit the container size. I used this on my website here link to page if you want a live example. I understand your using iframe, but this was the only option I could find for my site. I have provided my code here just as a guide to illustrate my point, however you will be able to style it better than me as I a sloppy coder I'm afraid...
https://jsfiddle.net/andydry1/6t5o2n8z/1/
data-adapt-container-width="true" *make sure this is set to true*
data-width="300" *change width to suit extra-small, small and large divs *
This isn't the exact answer for your situation; However it may provide some help :-)
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
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.
I'm using twitter bootstrap to create a website for desktops and mobile phones. I want the login form to be centered both in the x direction and in the y direction.
So if the grid was 100 x 100, then the form would be at 50,50.
I'm able to get the form somewhat to the center of the screen in firefox using text-align: center; but firefox puts it a bit off to the right.
What can I do to get to the center?
Here is my HTML
Here is my bootstrap.css
Try using margin:auto; on the <div> that contains the form.
That's an awful lot of nested div tags in there, though I know it's partly Bootstrap's fault! One thing I would stress is to make use of the ones that you already have to use with Bootstrap rather than adding new ones to change positioning, because that will create lots of headaches.
After playing with this, I didn't come up with a definite solution, but here's what I think:
Read up on CSS media queries... this will make the solution to your
desktop > mobile problem much easier!
Don't use CSS for a vertical alignment. Divs aren't table cells
and can't really act like them. A small JavaScript that sniffs out
the width of the screen and does the positioning math is better. A
quick Google search will bring up plenty.