The bootstrap .conatiner div has a style, what is it below:
#media (min-width: 1200px){
.container {
width: 1170px!important;
}
}
Can i overwrite this 1170px width to 80%, or higher? Only in that media query.
<div class="container" width="80%">Contaier body</div>
or you can go to your css file and change the width
.container{
width:80%;
}
You can overwrite it by inline CSS style or taking advantage of priority because downer codes overwrite upper codes:
#media (min-width: 1200px){
.container {
width: 1170px!important;
}
.container {
width: 80% !important;
}
}
Please note: The downer code must have !important afterward.
Related
I am facing issue setting width of div for different screens. I made a class .vBox in tailwind.css
.vBox{
width: 360px;
min-height : 200px;
}
And used it in div
<div className="h-48 md:vBox w-full">
But the width is always full, according to w-full, for all media screens. I even tried
<div className="h-48 w-full md:vBox">
But same result. If i remove w-full, then width is according to vBox but i want w-full class width in mobile screens.
To make your custom .vBox class responsive you can define it as follow:
#variants responsive {
.vBox {
width: 360px;
min-height : 200px;
}
}
This will allow your class to be picked up by breakpoints prefixes, like md:vBox in your example.
Check the generate responsive variants documentation for more details.
If you like to set various spacific width's for each spacificed device, you can do that by grabbing the screen width of the device by using #media() css function. i made a example for you in https://play.tailwindcss.com/gEgbhOvzH8?size=514x720&file=css
or you can check code snippet shown in below
.vBox{
min-height : 200px;
background: red;
}
#media (min-width:480px) {
.vBox { width: 400px }
}
#media (min-width:640px) {
.vBox { width: 600px }
}
#media (min-width:768px) {
.vBox { width: 700px }
}
#media (min-width:1024px) {
.vBox { width: 1000px }
}
#media (min-width:1280px) {
.vBox { width: 1200px }
}
#media (min-width:1536px) {
.vBox { width: 1500px }
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="h-48 vBox w-full">
You can use w-[100%] instead of w-full this will do the trick.
I created a spacing-element that uses two classes:
.spacer-mobile-M = spacing height on mobile devices
.spacer-desktop-0 = spacing height on desktop devices (only active #media (min-width: 992px))
.spacer-blank {
display: block;
border: 1px solid #000;
}
.spacer-mobile-M {
height: 20px;
}
#media (min-width: 992px) {
.spacer-desktop-0 {
height: 0px;
}
}
<div class="spacer-blank spacer-mobile-M spacer-desktop-0" aria-hidden="true"></div>
The expected behavior on a 1200px wide screen would be, that the mobile-spacer is being overwritten by the desktop style (higher specificity due to media query and defined later in the code).
However, right now, the desktop spacer is being overwritten by the mobile style.
I only experience this behavior with a spacer that has a lower height than the mobile value.
Is there a rule, that classes with height: 0 or lower height than the general one (without media query) can be overwritten? I can't find anything in Google when I search for specificity.
Thanks for a short hint.
I think the problem could be use two different CSS classes for the same element. If you use media queries, why don't use the same class? For example:
.spacer {
display: block;
height: 20px;
}
#media (min-width: 992px) {
.spacer {
height: 0;
}
}
<div class="spacer" aria-hidden="true"></div>
I don't know the rest of the code, but if on desktop size you want simply hide the spacer also you can use:
#media (min-width: 992px) {
.spacer {
display: none;
}
}
This may be a beginner question concerning CSS.
Is it possible to decide what to to print (dispay) using CSS and media queries?
Say for example if my window (or device screen) is smaller than 500 pixels then dispay "Hello!" otherwise dispay "Guten Tag!"
What I have found shows how to decide some display attribute (color or ...), never the contents itself.
You can use a pseudo-element with content:
p::before{ content: 'foo' }
#media (max-width: 500px){
p::before{ content: 'bar' }
}
<p></p>
JSFiddle
You'd need to have two elements, one for screen bigger than 500 and one for less than 500. Then use media queries to show/hide one on them
DEMO: http://jsbin.com/pizosehire/edit?output
HTML
<div class="large">Hello</div>
<div class="small">Guten Tag</div>
CSS
.small {
display: none;
}
#media (max-width: 500px) {
.large {
display: none;
}
.small {
display: block;
}
}
You will need to work with media-queries.
You can change your css to something like this
#media (max-width: 500px){
#mydiv{ background: url('img-sx.img') }
}
#media (min-width: 501px){
#mydiv{ background: url('img-s.img') }
}
I'm looking for a way to add a line break if the screen width is smaller than X.
Half of the text should stay on the next line, instead of just one word, on smaller screen width.
Normal view on big screens:
Normal view on smaller screens:
Wanted result on smaller screens:
Thinner text is not related
I'm looking for a way to do it with CSS.
Use #media queries with span element and turn them to display: block; as they are inline by default...
Demo (Resize the fiddle window)
div {
font-size: 30px;
font-family: Arial;
}
#media screen and (max-width: 400px) {
div span:last-of-type {
display: block;
color: #f00;
}
}
#media screen and (max-width: 300px) {
div span:nth-of-type(2) {
display: block;
color: #00f;
}
}
Explanation: Here, I've simply wrapped each word with the span element which is inline by default.. So what I do is, I turn them to display: block; if the screen resolution is less than some px.
You can make these flexible by applying display: block; and display: inline-block; whichever suits your requirements.
If screen size is maximum of 400px
If screen size is maximum of 300px
Changing colors so that you can see the effect.
Add the br in your code, hide it using css initially and make it display: inline in media queries when the width meets your requirement
http://jsfiddle.net/LnECr/1/
br{ display: none; }
#media all and (max-width: 480px) {
.break2 { display: inline }
}
#media all and (max-width: 320px) {
br { display: inline }
}
Many different ways this can be done, I am using br because you asked for br
I wouldn't use a <br /> tag. Use CSS white-space:nowrap instead.
Like this:
<h1>Creative <span class="wrap">Web Design</span></h1>
#media screen and (max-width:480px) {
span.wrap {
white-space:nowrap;
}
}
I need to set a height on a div and i would like to set it relative to the device screen.
For ie :
/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }
/*Small devices Tablets (≥768px)*/
.myClass { height: 400px; }
/*Medium devices Desktops (≥992px)*/
.myClass { height: 600px; }
/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }
Edit: Improved example at CodePen.
I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :
function isMobile() {
return $('.device-xs').is(':visible');
}
Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:
if( isMobile() ) {
$('.someClass').css('property', 'value');
}
#media screen and (max-width: 768px){
.myClass{
height:200px;
}
}
Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:
This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.
.myClass {
height: 200px; /*default extra small*/
#media (min-width: 768px) /*small*/
{
height: 400px;
}
#media (min-width: 992px) /*medium*/
{
height: 600px;
}
#media (min-width: 1200px) /*large*/
{
height: 800px;
}
Look at media queries.
#media (max-width: 768px) {
.myClass {
display: none;
}
}
#media (max-width: 992px) {
.myClass{
display: none;
}
}
#media (max-width: 1200px) {
.myClass{
display: block;
}
}
Use the viewport width and height after declaring the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:
.myClass { height: 30vh; }
You'll also need to define default class, for example screen size - greater than 1200px
/*Extra small devices Phones (<768px)*/
#media only screen and (min-width:768px){
.myClass { height: 200px; }
}
/*Small devices Tablets (≥768px)*/
#media only screen and (max-width:768px){
.myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/
#media only screen and (max-width:992px){
.myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
#media only screen and (max-width:1200px){
.myClass { height: 800px; }
}