I have foundation setup in my Drupal site I want to implement the breakpoints from the foundation. I have following settings for breakpoints
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large);
What else settings is required for breakpoints to work.
Basically all you need is to implement those classes on your markup
Here is an example using Foundation default classes:
<div class="row">
<div class="small-6 medium-4 columns"></div>
<div class="small-6 medium-8 columns"></div>
</div>
Make sure you have the viewport metatag in the <head> of your markup:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Also, inside any style definition you can override it using your breakpoints like this:
.my-background {
background-color: #FFFFFF;
#include breakpoint(medium only) {
background-color: #000000;
}
}
Whatever you define between those braces will affect screens within your "medium" breakpoint.
Check out the documentation
Related
I have two main divs on page and I want to hide on of them in case user comes from tablet / phone.
Based on documentation I tried something like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="contrainer row">
<div class="col-lg-6 col-md-12">
SHOW ME ALWAYS!
</div>
<div class="col-lg-6 hidden-md-down">
HIDE ME ON SMALL
</div>
</div>
Unfortunately it doesn't work. Second div will display all the time. Any idea what I'm doing wrong?
4.0.0-beta no longer has hidden-*, see Migrating to v4:
Our responsive utility classes have largely been removed in favor of explicit display utilities.
The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
I'm creating a form using responsive design using Bootstrap. My goal is to make such input that would be the slider type on mobile devices, and the text type on medium devices and bigger.
For that reason I'm using different classes in two divs to show and hide content depending on the device screen width (e.g. hidden-xs, hidden-sm, hidden-md, hidden-lg).
<div class="form-group hidden-sm hidden-md hidden-lg">
<!-- input type slider for mobile devices -->
</div>
<div class="form-group hidden-xs">
<!-- input type text for wider screen devices -->
</div>
I also have a #media rule in my css file:
#media (min-width: 768px) {
.sm-view {
display: none;
}
}
#media (max-width: 767px) {
.lg-view {
display: none;
}
}
It works as I expected, except on the boundary width value of 767px, on this width both divs are visible:
As only I increase the width value to 768px the slider hides, and when I set the width value to 766px the input field hides.
What I'm doing wrong?
UPD Here is working example: https://jsfiddle.net/rnurxbw9/1/
Here the window width would be different, but you can see it on the screenshot:
You're not letting us know which Bootstrap version you're using. I would look at their documentation v4 documentation or v3 documentation
If you're using bootstrap you shouldn't need to set any css manually. Try adding the visible-sm class to the one you're trying to show on larger devices.
<div class="form-group hidden-sm hidden-md hidden-lg">
<!-- input type slider for mobile devices -->
</div>
<div class="form-group hidden-xs visible-sm">
<!-- input type text for wider screen devices -->
</div>
I need to break a line at a specific point in mobile/small views. For instance, I'd like the text « Commune : CENON-SUR-VIENNE » to break after the colon character. Is there a syntax that allows to specify this manually instead of leaving Bootstrap CSS doing it automatically?
I include a piece of my HTML code below. I have well specified the meta tag inside the <head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Screenshot :
HTML code:
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : CENON-SUR-VIENNE</h4>
</div>
</div>
</div>
</div>
you could try this. https://jsfiddle.net/5vwh46f8/1/
Putting the second word in a span and adding a style inline-block.
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
</div>
</div>
</div>
</div>
<style>
h4 span{
display: inline-block;
}
</style>
Use a "responsive" <br> tag:
<style>
br.responsive {
display: inline; // Show BR tag for narrow screens
}
#media (min-width: 320px) { // or whatever you are after
br.responsive {
display: none; // Hide BR tag for wider screens
}
}
</style>
Some text <br class="responsive" /> more text.
The more straightforward option is to use the display classes built-in to Bootstrap and hide a <br /> based on screen size.
<h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>
The use of columns or wrapping content in spans is overkill; just throw in a little display class and show/hide as needed.
To avoid breaking on a hyphen, use a non-breaking hyphen character. (U+2011)
h4 { width: 200px }
<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON‑SUR‑VIENNE</h4>
You can use the available classes "for toggling content across viewport breakpoints". For example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>
I think a media query could give you better control. What if you only wanted to break on desktop (1) didn't want it to break on mobile (2)?
The HTML:
<div class="col-12 text-center">
<h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>
And the CSS:
#media (min-width: 700px) {
.title-break {
display: inline-block;
}
}
You Can Manage in responsive style through decrease font-size
I want to use #media to "hide" some block elements from the desktop version to mobile, so the "hidden" elements won't eat traffic.
This "block elements" will obviously contain many data, including images, inline block elements, block elements etc. All this should not downloaded in the mobile version. And well, I'm wondering if it's possible to achieve this with the #media rule. As far as I can tell, the display: none doesn't solve this problem, but perhaps I'm wrong.
P.S. code example:
<div class="desktop">
...
<div ... > ... </div>
<span ... > ... </span>
...
</div>
<div class="mobile">
...
<div ... > ... </div>
<span ... > ... </span>
...
</div>
#media (max-width:799px){
.desktop { display: none; }
}
#media (min-width:800px){
.mobile { display: none; }
}
Elements are loaded even with a display:none (they are loaded but not displayed), you could use JQuery to generate some parts of your website:
$( document ).ready(function() {
if (window.matchMedia('(max-width: 767px)').matches) {
$("#mobile" ).html("mobile!");
} else {
$("#desktop" ).html("desktop!");
}
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<div id="mobile"></div>
<div id="desktop"></div>
On mobile the HTML code would looks like this :
<div id="mobile">Mobile!</div>
<div id="desktop"></div>
On Desktop like this :
<div id="mobile"></div>
<div id="desktop">Desktop</div>
I don't know if there's a better solution, but I hope my answer will help you.
Let's say I have a div where I have applied "container-fluid".
How can I change it to "container" when the viewport is below 1200px (large devices) ?
I know that I can duplicate the code and use something like this:
<div class="container-fluid hidden-md">...content here...</div>
<div class="container hidden-lg">...content here...</div>
But this doesn't feel good. Is there any other way to do this?
You could add a custom class and media query to your own stylesheet (loaded after bootstrap), so something like
.customcontainer {
border: 1px solid red;
}
#media(max-width:1200px) {
.customcontainer {
max-width: 300px; //or whatever you want max width to be
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid customcontainer">...content here...</div>
I just added the border and low px width for demonstration purposes