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.
Related
I have a website where I have an element .mainContent and want it to have a different width for different devices. For smaller devices I want it to have the width of 800px and on desktop devices I want it to have the width of 1296px. Below are my CSS rules. The problem is that the last media query rule is overwriting the first rule and so the width for the desktop devices is always 800px and I don't knoq why. I did as w3school tutorial says but it doesn't work.
.mainContent {
width: 800px;
margin-right: 65px;
float: right;
}
#media only screen and (min-width: 1300px) {
.mainContent {
width: 1296px;
}
}
HTML
<div class="container-fluid">
<div class="mainContent">
...
</div>
</div>
If you not added viewport then add this viewport and it's working fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If after adding viewport it's not working then Please try below code:
.mainContent {
margin-right: 65px;
float: right;
}
#media only screen and (min-width:1300px) {
.mainContent {
width: 1296px;
}
}
#media only screen and (min-width:320px) {
.mainContent {
width: 800px;
}
}
Please review this link for understand the flow of adjust media queries: ( https://www.sitepoint.com/media-queries-width-vs-device-width/ )
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;
}
}
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.
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; }
}
I have a couple of images in a facebook app. The problem is that the image is quite big and I need it to look well whether it is accessed from a computer or phone. Setting it to some fixed dimension would obviously make it look bad, considering the different screen dimensions.
So, how should I resize it so that it would look well on any screen?
Set the width and height on the img tags to be percentages (of their container):
<img src="http://..." alt="" width="50%" height="30%" />
Adjust percentages to your needs.
Use media queries.
e.g:
#media all and (min-width: 1001px) {
img {
width: 100%; /* insert prefered value */
height: auto;
}
}
#media all and (max-width: 1000px) and (min-width: 700px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
Try this
img
{
width:100%;/*adjust this value to your needs*/
max-width: the size of the image;/* so it wont get bigger and pixelated*/
height:auto;
}
another option if possible, is to use media queries, so for different browser sizes, you can load different size of the image.
here is a fiddle to see if this is what you are trying to achieve