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/ )
Related
I am missing something really simple here so hopefully somebody can unspin my brain.
I have a page layout working OK but on applying the media breakpoints nothing changes. Below is an example of my CSS. You can see I am just altering the font size to try and get the thing working but nothing changes when altering the browser width. The p font remains the same size regardless of the browser width.
Importantly - the regular Bootstrap responsiveness and page layout does happen, my own media instructions do not.
p {
font-size: 16px;
}
#media (min-width: 576px) {
p {
font-size: 116%;
}
}
#media (min-width: 768px) {
p {
font-size: 108%;
}
}
Another example is a carousel I have added. The media instructions only involve the height of the carousel. But like the example above - the carousel height remains the same no matter the broswer width.
#carouselMain {
height: 460px;
}
#media (min-width: 576px) {
#carouselMain {
height: 660px;
}
}
#media (min-width: 768px) {
#carouselMain {
height: 560px;
}
}
Thanks. I don't know why this should happen. A similar question has been asked before but the given answer doesn't seem to apply to this question.
Have you tried using the !important after the property?
Like this:
#media (min-width: 576px) {
p {
font-size: 116%!important;
}
}
Give <p> an id and then add this to the CSS stylesheet:
#media (min-width: 400px) {
#p{
color: red;
font-size:24px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid">
<p id="p">P media</p>
</div>
Or use! Important w3.org (info)
#media (min-width: 400px) {
.container-fluid > .p{
color: red;
font-size: 34px!important;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid">
<p class="p">P media</p>
</div>
Like those often missed dashes and slashes the problem was poor syntax in the CSS immediately before my breakpoints and so the breakpoints weren't being processed properly. I'm clocking out for the next two and a half days.
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.
Website logo is not displaying appropriately on the physical mobile device, I am using an iPhone X. However when changing the screen size of the desktop version; the logo adapts appropriately
I am modifying the theme, so please bear with me. I have attempted to modify the size with max-width tags
Code within the Custom CSS:
#media (max-width: 767px){
#logo .retina-logo {
height: 35%;
width: 45%;
margin-top: -2px;
}
}
#media (max-width: 600px){
#logo .retina-logo {
height: 90%;
width: 60%;
margin-top: -2px;
}
}
#media (max-width: 500px){
#logo .retina-logo {
height: 100%;
width: 90%;
margin-top: 4px;
}
}
Feel free to view www.TattiniBoots on your mobile device to see what I am talking about. You will notice that the logo is very tiny and not the correct width that is displayed when changing the screen size on desktop
Apparently your media queries are in the wrong order on your website (inspector says the rules are inline on line 28 / 19 / 11 for 500 / 600 / 767px) - a different order than what you posted in your code above. So just reverse the order of those media queries, since otherwise the 767px rule will overwrite the others when it follows the others.
Try adding <meta name="viewport" content="width=device-width, initial-scale=1.0" /> in the <head>
So, I'm trying to use #media in CSS on my rails project.
I have a text which needs to be displayed only on mobile Heres the code
a.html.erb
<div class="A__b--c-d">
<%= link_to .......
....
</div>
b.scss
div.A__b--c-d {
display: none;
}
#media only screen and (min-width: 200px) and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
I cannot seem to get the text displayed on mobile.
Heres what ive tried so far.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pasted this in Chrome inspect element
All the names are right
You need to remove the .div and just select the max-width in your media query.
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
You made a mistake in your media query. Try this
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
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; }
}